﻿/* MVを全幅にする場合 */
div#wrapMainContent {width:100%;}
ul.topicPath {width:950px;}
#fullContent {width:1100px;margin:-80px auto 80px;padding:40px;font-size:14px;justify-content: space-between;box-sizing:border-box;background:#fff;box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);}
.mv{width: 100%;height: auto;}
.bg {background:#ebe6dc;width:100%;}

span.marker {
    background: linear-gradient(transparent 50%, #ffd359 50%);
}

h1 {margin:0;padding:0;}
h1 img {width:100%;}

p {font-size:1.4rem;font-weight:600;}

.read {
    width:100%;
    text-align: center;
}

.read p {font-size:1.6rem;}

a.anchor,a.btn,a.order {
    text-align: center;
    margin: 30px auto;
    text-decoration: none;
    border-radius: 50px;
    font-size:1.4rem;
    display: block;
    width: 300px;
box-sizing:border-box;
}

a.anchor,a.order {padding: 20px 30px;}
a.btn {padding:10px 30px;}
a.anchor,a.btn {border: 1px solid #472d1d;color: #472d1d;}
a.order {background:#472d1d;color: #fff;display:block;font-weight:700;}


.anchor:after {
    content: "\f063";
    font-family: "Font Awesome 5 Pro";
    padding: 0 0 0 10px;
}

.btn:after,.order:after  {
        content: "\f061";
        font-family: "Font Awesome 5 Pro";
        padding: 0 0 0 10px;
}

h2 {
    color:#472d1d;
    border-bottom: none;
    text-align: center;
    font-size: 2.4rem;
    margin: 50px 10px 20px 10px;
}

h2.line {
  position: relative;
  padding: 1em 2em;
  text-align: center;
    margin: 80px 10px 10px 10px;
}

h2.line:before,
h2.line:after {
  position: absolute;
  content: '';
}

h2.line:after {
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  border-top: 2px solid #000;
  border-left: 2px solid #000;
}

h2.line:before {
  right: 0;
  bottom: 0;
  width: 50px;
  height: 50px;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
}


h3 {padding: 20px;box-sizing:border-box;font-weight:700;text-align:center;margin:70px 0 0 0;font-size:2rem;}

.wrap3row h3 {
  position: relative;
  padding: 1.5rem 2rem 0.5rem 80px;
  /*border-bottom: 3px solid #000;*/
  font-size:1.6rem;
  color:#472d1d;
}

.wrap3row h3 span {
  font-family: 'Roboto', sans-serif;
  font-size: 6rem;
  line-height: 1;
  position: absolute;
  bottom: -0.5rem;
  left: 0;
}

.wrap3row h3 img {
        position: absolute;
        top: -30px;
        left: 20px;
        margin:0;
}

.wrap3row p {font-weight:700;}

.wrap3row h3 img.icon {width:40px;}

h4 {font-weight:600;font-size:2rem;text-align:center;}
h4 span {font-weight:500;font-size:1.4rem;display:block;}

.wrap3row {text-align:center;}
.wrap2row {width:47%;box-sizing:border-box;position:relative;margin: 30px 0 20px 0;}
.wrap4row {text-align:center;margin:30px 0 0 0;width:22%;position:relative;}
.wrap2row img,.wrap3row img,.wrap4row img {width:100%;margin:20px auto;}


.info-icon  {width:170px;background:#fff;padding:15px 0;box-sizing:border-box;position:absolute;left:10px;bottom: 240px;text-align:center;background-size:contain;}
.info-icon p {color:#000;font-size:1rem;font-weight:600;}
.info-icon p span {font-size:1.6rem;}

.info-icon:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 10px;
  content: '';
  background-image: -webkit-repeating-linear-gradient(135deg, #472d1d, #472d1d 1px, transparent 2px, transparent 5px);
  background-image: repeating-linear-gradient(-45deg, #472d1d, #472d1d 1px, transparent 2px, transparent 5px);
  background-size: 7px 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}


@media screen and (max-width: 767px) {
ul.topicPath {width:100%}
#fullContent {width:100%;padding:20px;margin:0;}
.wrap3row h3 {font-size:2rem;}
.wrap3row h3 img {top:-40px;}
read {width:85%;}
h2 {font-size: 2rem;}
h2.line {margin: 60px 5px 5px 5px;padding: 1em;}
a.btn {margin: 10px auto;width: 70%;}
.info-icon {position:relative;left: auto;bottom: auto;margin:0 auto;border-bottom: 1px solid #94847b; }
.read p {font-size: 1.4rem;}
 }