@charset "UTF-8";
/* CSS Document */
/***********　特集ページ共通　***********/
img {
 width: 100%;
}
.feature-txt-center {
 text-align: center;
 line-height: 1.5em;
}
main.main-page.main-feature {
max-width: inherit;
padding-top: 114px;
}
.feature-contents {
 width: 95%;
 max-width: 1360px;
 margin: auto;
}
.feature-section-01 {
 background: #FEFCE7;
 padding: 50px;
 position: relative;
}
.feature-section-01::after {
 content: "";
 display: block;
 position: absolute;
 width: 100%;
 height: 15.5px;
 bottom: -15px;
 left: 0;
 transform: scale(1, -1);
 background-image: url(https://sonaeyou.jp/wp-content/themes/sonaeteru/img/front/wave.svg);
 background-repeat: repeat-x;
}
.feature-section-01 h2 {
 padding:0 0 45px 0;
}
.feature-section-01 h2 span {
 position: relative;
 width: fit-content;
 margin: 0 auto;
 text-align: center;
 font-weight: 700;
 display: inline-block;
 font-size: .8em;
 line-height: 1.6em;
}
.feature-section-01 h2 span:after {
 content: "";
 display: block;
 width: 100%;
 height: 7px;
 background-color: #eec316;
 border-radius: 20px;
 margin-top: 4px;
}
.feature-section01-text {
 text-align: center;
 font-size: 1.2em;
 line-height: 1.5em;
}
.feature-section-02 {
 padding: 80px 0 20px;
}
main.main-feature .section-03 {
 width: 100vw;
 margin: 60px calc(50% - 50vw) 0;
 padding: 0 0 60px;
 background-color: #fefce7;
}

@media screen and (min-width: 1000px) {
main.main-page.main-feature {
 padding-top: 153px;
 padding-bottom: 100px;
}
}
@media screen and (min-width: 768px) {
main.main-page.main-feature {
 padding-bottom: 80px;
}
}

/***********　災害に強い家に　***********/
.feature-home-mainimg {
 max-width: 890px;
 width: 100%;
 margin: 20px auto 0;
}
.feature-contents.feature-section-02 div {
 display: flex;
 justify-content: space-around;
 padding: 0 0 90px 0;
}
.feature-contents.feature-section-02 div.row {
 flex-direction: row-reverse;
}
.feature-contents.feature-section-02 figure {
 max-width: 532px;
 width: 45%;
 margin: auto;
}
.feature-contents.feature-section-02 dl {
 max-width: 600px;
 width: 45%;
 margin: 0 auto 20px;
}
.feature-contents.feature-section-02 dl dt {
 font-size: 1.5em;
 font-weight: 500;
}
.feature-contents.feature-section-02 dl dt:after {
 content: "";
 background-color: #EEC316;
 display: block;
 width: 100%;
 height: 3px;
 border-radius: 20px;
 margin-top: 4px;
}
.feature-contents.feature-section-02 dl dd.feature-title-sub {
 font-size: 1.2em;
 padding: 10px 0;
}
.feature-contents.feature-section-02 dl dd ul {
 display: flex;
 justify-content: flex-start;
 padding: 25px 0 0;
}
.feature-contents.feature-section-02 dl dd ul li {
 width: 230px;
 margin: 0 20px 10px 0;
}
.feature-wrap-btnarea {
 background-image: repeating-linear-gradient(315deg, #FFF8B6, #FFF8B6 14px, transparent 14px, transparent 20px);
 position: relative;
 padding: 100px 0;
 margin: 50px auto 0;
}
.feature-btnarea {
 max-width: 1310px;
 width: 95%;
 margin: auto;
 background: #ffffff;
 border-radius: 40px;
 padding: 0 0 50px;
}
.feature-btnarea-titlearea {
 width: 90%;
 margin: auto;
 position: relative;
 top: -30px;
 right: 0;
 left: 0;
 background:url("https://sonaeyou.jp/wp-content/themes/sonaeteru/img/home-safty/feature-btn-titleimg.png") no-repeat;
 background-size: contain;
 background-position: center bottom;
 min-height: 150px;
}
.feature-btnarea-titlearea:after {
 content: "";
 background-color: #EE7801;
 display: block;
 width: 100%;
 height: 5px;
 border-radius: 20px;
 position: absolute;
 bottom: 0;
}
.h3-feature-btnarea-title {
 color: #EE7801;
 font-size: 1.8em;
 line-height: 1.5em;
 font-weight: 600;
 text-align: center;
 position: relative;
 margin: auto;
 padding: 50px 0 20px;
 -webkit-text-stroke: 4px #ffffff;
 text-stroke: 4px #ffffff;
 paint-order: stroke;
}
.h3-feature-btnarea-title span {
 display: block;
 font-size: .9em;
 position: relative;
 z-index: 2;
}
.feature-btn-orange {
 max-width: 600px;
 width: 90%;
 margin: 20px auto 0;
}
.feature-btn-orange a {
 width: 100%;
 margin: auto;
 padding: 20px 10px;
 display: block;
 background: #EE7800;
 color: #ffffff;
 text-align: center;
 border-radius: 50px;
 font-size: 1.5em;
}
.feature-yokohama-supervision {
 text-align: center;
 font-size: 0.9em;
 padding: 30px 0 0;
}
.feature-yokohama-supervision span {
 width: 130px;
 height: 103px;
 display: block;
 margin: 25px auto 10px;
}
@media screen and (min-width: 1000px) {
.feature-wrap-btnarea {
 background-image: repeating-linear-gradient(315deg, #FFF8B6, #FFF8B6 23px, transparent 23px, transparent 36px);
}
}
@media screen and (max-width:620px) {
.feature-contents.feature-section-02 div {
 display: inherit;
}
.feature-contents.feature-section-02 figure {
 width: 100%;
}
.feature-contents.feature-section-02 dl {
 max-width: 600px;
 width: 100%;
}
}
/***********　アレルギー疾患の災害対応　***********/
body.page-template-default h2.h2-allergy-title:after {
 display: none;
}
.feature-allergy-mainimg {
 max-width: 1300px;
 width: 100%;
 margin: 10px auto 0;
}
.feature-allergy-mainimg-sp {
 display: none;
}
.main-feature .feature-contents.feature-section-02 dl.allergy-surveyresult {
 max-width: 1130px;
 width: 95%;
 text-align: center;
}
.main-feature .feature-contents.feature-section-02 dl.allergy-surveyresult dt {
 width: fit-content;
 margin: 0 auto 15px;
}
.main-feature .feature-contents.feature-section-02 dl.allergy-surveyresult dd {
 padding: 0 0 25px 0;
}
.main-feature .feature-contents.feature-section-02 dl.allergy-surveyresult dd span {
 font-size: .9em;
 display: block;
 padding: 10px 0 0;
}
.h3-allergy-titlearea {
 background: #EEC316;
 color: #ffffff;
 padding: 20px 0 20px;
 margin: 0 auto 50px; 
}
.h3-allergy-titlearea h3 {
 text-align: center;
 font-size: 2em;
 max-width: 20em;
 width: 95%;
 margin: auto;
 position: relative;
}
.h3-allergy-titlearea h3 span {
 display: block;
 font-size: .8em;
}
.feature-allergy-medicalimg {
 max-width: 823px;
 width: 100%;
 margin: 30px auto;
}
.feature-allergy-withallergies {
 width: 100%;
 margin: 50px auto;
 position: relative;
 padding: 80px 0 0 0;
}
.feature-allergy-withallergies dt {
 background: #966E5A;
 color: #ffffff;
 font-size: 1.2em;
 text-align: center;
 position: relative;
 padding: 15px 0;
 z-index: 1;
}
.feature-allergy-withallergies dt:before {
 content: "";
 background: url("https://sonaeyou.jp/wp-content/themes/sonaeteru/img/allergy/feature-allergy-withallergies.png") no-repeat;
 width: 100%;
 min-height: 195px;
 background-size: contain;
 position: absolute;
 bottom: -40px;
 right: 0;
 left: 0;
 margin: auto;
 z-index: 2;
}
.feature-allergy-withallergies dt:after {
 content: "";
 position: absolute;
 bottom: -23px;
 right: 0;
 left: 0;
 margin: auto;
 width: 35px;
 height: 24px;
 background: #966E5A;
 clip-path: polygon(0 0,100% 0, 50% 100%);
}
.feature-allergy-withallergies dd {
 background: #ffffff;
 padding: 25px;
}
.feature-allergy-withallergies ul li {
 color: #EE7801;
 font-size: 1.4em;
 line-height: 1.5em;
 font-weight: 500;
 padding: 8px 0 8px 30px;
 position: relative;
 z-index: 3;
}
.feature-allergy-withallergies ul li:before {
 content: "";
 background: url("https://sonaeyou.jp/wp-content/themes/sonaeteru/img/allergy/icon_circle.png") no-repeat;
 width: 22px;
 height: 22px;
 background-size: contain;
 position: absolute;
 top: 13px;
 left: 0;
}
.feature-allergy-withallergies ul li span {
 color: #333333;
 font-size: 0.7em;
 display: block;
}
.feature-allergy-withallergies ul li:last-child:before {
 top: 48px;
}
.feature-allergy-medicalopen {
 width: 100%;
 min-height: 280px;
 background: url("https://sonaeyou.jp/wp-content/themes/sonaeteru/img/allergy/feature-allergy-medicalopen.png") no-repeat;
 background-size: contain;
 background-position: center 50px;
}
.feature-allergy-medicalopen h4 {
 max-width: 765px;
 width: 100%;
 border-radius: 35px;
 background: #EEC316;
 border: 2px solid #333333;
 text-align: center;
 margin: 0 auto 30px;
 padding: 10px;
 font-size: 1.2em;
}
.feature-allergy-medicalopen p {
 line-height: 2em;
 text-align: center;
}
.feature-allergy-medicalopen dl {
 text-align: center;
 padding: 40px 0;
 font-size: 1.2em;
 font-weight: 500;
}
.feature-allergy-medicalopen dt {
 padding: 0 0 20px 0;
}
.feature-allergy-medicalopen dd {
 max-width: 963px;
 width: 100%;
 margin: auto;
}
.h3-feature-allergy-faqtitlearea {
 text-align: center;
 margin: 50px auto 0;
 padding: 80px 0 20px;
 position: relative;
 width: 100%;
 min-height: 155px;
 background: url("https://sonaeyou.jp/wp-content/themes/sonaeteru/img/allergy/feature-allergy-faqtitle.png") no-repeat;
 background-size: contain;
 background-position: center bottom;
}
.h3-feature-allergy-faqtitle {
 position: relative;
 width: fit-content;
 margin: 0 auto;
 text-align: center;
 font-weight: 700;
 display: inline-block;
 font-size: 1.5em;
 line-height: 1.6em;
 z-index: 2;
}
.h3-feature-allergy-faqtitle:after {
 content: "";
 display: block;
 width: 100%;
 height: 4px;
 background-color: #eec316;
 border-radius: 20px;
 margin-top: 4px;
 text-align: center;
}
.feature-allergy-faqarea {
 background: #FEFCE7;
 padding: 30px 20px;
 border-radius: 15px;
 position: relative;
 z-index: 2;
}
.feature-allergy-faqarea dl {
 display: flex;
 margin: 0 auto 30px;
 width: 100%;
}
.feature-allergy-faqarea dl dt.feature-faq-q {
 width: 50px;
 height: 50px;
 border-radius: 50%;
 display: block;
 background: #EEC316;
 color: #ffffff;
 line-height: 45px;
 text-align: center;
 font-size: 1.5em;
}
.feature-allergy-faqarea dl dt.feature-faq-a {
 width: 50px;
 height: 50px;
 border-radius: 50%;
 display: block;
 border: 3px solid #EEC316;
 background: #ffffff;
 color: #EEC316;
 line-height: 40px;
 text-align: center;
 font-size: 1.5em;
}
.feature-allergy-faqarea dl dd {
 width: calc(100% - 50px);
 padding: 10px 0 10px 10px;
 line-height: 2em;
}
.feature-allergy-faqarea dl dd dl {
 display: block;
 padding: 20px 0 0;
}
.feature-allergy-faqarea dl dd dl dt {
 width: 100%;
 text-align: center;
}
.feature-allergy-faqarea dl dd dl dd {
 width: 100%;
 padding: 10px 0;
}
.feature-allergy-example {
 max-width: 966px;
 width: 100%;
 margin: auto;
}
.feature-allergy-example span {
 font-size: .9em;
 display: block;
 padding: 10px 0 0;
}
@media screen and (max-width:820px) {
.feature-allergy-mainimg {
 display: none;
}
.feature-allergy-mainimg-sp {
 display: block;
 max-width: 820px;
 width: 100%;
 margin: 10px auto 0;
 }
.feature-allergy-withallergies dt:before {
min-height: 120px;
 bottom: 0;
 top: -10px;
}
.feature-allergy-medicalopen {
 background: none;
}
}
@media screen and (max-width:620px) {
 .feature-txt-center {
 text-align:inherit;
 }
.feature-section-01 {
 padding: 30px 10px;
}
.feature-section01-text {
 text-align: inherit;
 }
.h3-allergy-titlearea {
 padding: 20px 0 20px;
}
.h3-allergy-titlearea h3:before {
 top: -110px;
 right: 0;
 left: 0;
 margin: auto;
}
.feature-allergy-medicalopen p {
 text-align: inherit;
 }
.feature-allergy-withallergies {
 padding:30px 0 0 0;
 }
.h3-feature-allergy-faqtitlearea {
 margin: 10px auto 0;
 padding:60px 0 20px;
 }
}