@charset "utf-8";
/* CSS Document */


/* 2020.0625-sakuma */
@import url(basic-style.css);
@import url(google-fonts-style.css);

/* wrap 関連
-------------------------*/
.contents-wrap {
  position: relative;
  max-width: 1440px;
  min-width: 1000px;
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  margin: 0 auto;
  box-shadow:rgba(0, 0, 0, 0.2) 0 0 20px 5px;
  overflow-x: hidden;
}
@media screen and (max-width: 767px) {
.contents-wrap{ min-width: 240px;}
}
.maincontent{ width: 1000px; margin: 0 auto;}
@media screen and (max-width: 767px) {
.maincontent{ width:94%;}
}

/* TOP
-------------------------*/
#header{ background: #1da1f2; color: #fff; text-align: center; font-size: 30px; letter-spacing: 0.1em; line-height: 1em; font-weight: bold; padding: 10px;}
#header span{ display: inline-block; vertical-align: middle; margin-right: 10px; }
#header strong{ display: inline-block; vertical-align: middle;}
#mv{ background: url("../images/mv_bg.jpg") center bottom no-repeat; text-align: center; position: relative;}
#mv h1{ padding-top: 30px; position: relative; z-index: 3;}
#mv figure#mv_img{ margin: -10px auto 60px;}
#mv figure#mv_ico{ position: absolute; left: 50px; right: 0; top: 185px; z-index: 5;}
#mv_bar{ background: url("../images/mv_pt.png") repeat; padding-bottom: 40px;}
#mv_bar2{ background: url("../images/mv_bar.jpg") center center no-repeat; height: 166px;}
#mv_book{ position: absolute; left: 0; right: 0; bottom: -15px; width: 1000px; margin: auto; text-align: left;}
#mv_book img{ width: 285px;}
@media screen and (max-width: 767px) {
#header{ font-size:4vw; padding:1% 3%; text-align: left; position: relative;}
#header span{ width: 24vw; margin: 0;}
#header strong{ position: absolute; left: 0; right: 0; top: calc(50% - 0.5em); margin: auto; text-align: center;}
#mv{ background: url("../images/mv_bg_smp.jpg") center bottom; background-size:100% auto;}
#mv h1{ padding-top:3%;}
#mv figure#mv_img{ width: 88%; margin:-1.5vw auto 0;}
#mv figure#mv_ico{ top:46vw; left: 1.5vw;}
#mv_bar{ background: url("../images/mv_pt_smp.png") center bottom repeat-x; background-size: auto 5vw; padding-bottom:5vw; margin-top: 10vw;}
#mv_bar2{ background:none; height:auto;}
#mv_book{ bottom: -2vw; left: -3vw; right: auto; width:45%;}
#mv_book img{ width:100%;}
}


/*sec02*/
#sec02{ padding: 70px 0;}
#sec02 h3{ text-align: center; font-size: 26px; line-height: 1em; color: #ff719f; margin-bottom: 15px;}
#sec02 h3 strong{ display: inline-block; position: relative;}
#sec02 h3 strong:before{ content: ""; width: 26px; height: 1px; background: #ff719f; transform: rotate(60deg); position: absolute; left: -1em; bottom: 0.5em;}
#sec02 h3 strong:after{ content: ""; width: 26px; height: 1px; background: #ff719f; transform: rotate(-60deg); position: absolute; right: -1em; bottom: 0.5em;}
#sec02 h2{ text-align: center; font-size: 26px; line-height: 1.25em; position: relative; z-index: 5; margin-bottom: -30px;}
#sec02 h2 strong{ display: inline-block; background: #7c9fd3; color: #fff; padding: 20px 60px; border-radius: 40px;}
#sec02 h2 span{ display: inline-block; position: relative;}
#sec02 h2 span:before{content: ""; width: 100%; height: 1px; background: #fff; position: absolute; left: 0; right: 0; bottom: -1px;}
#sec02 h2 span:after{content: ""; width: 100%; height: 1px; background: #fff; position: absolute; left: 0; right: 0; bottom: -3px;}
@media screen and (max-width: 767px) {
#sec02{ padding:9% 0;}
#sec02 h3{ font-size:4.5vw; margin-bottom:1.5%;}
#sec02 h3 strong:before{ width:4.5vw;}
#sec02 h3 strong:after{ width:4.5vw}
#sec02 h2{ font-size:4.5vw; margin-bottom:-9vw;}
#sec02 h2 strong{ display:block; padding:3%; margin: 0 6%;}
}
#sec02 .maincontent{ background: #fafafa; border-radius: 20px; padding: 70px 50px;}
@media screen and (max-width: 767px) {
#sec02 .maincontent{ border-radius:3vw; padding:15% 0 6%; border: 1px solid #7c9fd3;}
}
#sec02 ul li{ background: #fff; border-radius: 8px; margin-bottom: 20px; padding: 10px 40px;}
#sec02 ul li:last-child{ margin-bottom: 0;}
#sec02 ul li dl{ display: table; table-layout: fixed; width: 100%;}
#sec02 ul li dl dt{ display: table-cell; vertical-align: middle; width: 290px;}
#sec02 ul li dl dt span{ display:inline-block; vertical-align: middle;}
#sec02 ul li dl dt figure{ display:inline-block; vertical-align: middle;}
#sec02 ul li dl dd{ display: table-cell; vertical-align: middle;}
#sec02 ul li dl dd h4{ background: #ffffcc; color: #444; font-size: 24px; line-height: 1.25em; padding: 0.25em 0; text-align: center; border-radius: 20px; margin-bottom: 5px;}
#sec02 ul li dl dd h5{ font-size: 25px; font-family: Hiragino Sans, "ヒラギノ角ゴシック", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", sans-serif;}
#sec02 ul li dl dd .price{ letter-spacing: -1em; font-family: Hiragino Sans, "ヒラギノ角ゴシック", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", sans-serif;}
#sec02 ul li dl dd .price span{ display: inline-block; vertical-align: middle; letter-spacing: 0; font-size: 18px; line-height: 1em; position: relative; margin-right: 0.5em;}
#sec02 ul li dl dd .price span span:before{ content: ""; width: 66px; height: 2px; background: #564134; position: absolute; left: 0; bottom: 10px; transform: rotate(-11.25deg);}
#sec02 ul li dl dd .price strong{ display: inline-block; vertical-align: middle; letter-spacing: 0; font-size: 26px; line-height: 1em; color: #c32d2d; font-family: Hiragino Sans, "ヒラギノ角ゴシック", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", sans-serif;}
#sec02 ul li dl dd .price strong small{ display: inline-block; vertical-align: middle; font-size: 16px; line-height: 1em;}
#sec02 ul li dl dd figure.btn a{ display: inline-block; background: #b72124; color: #fff; font-size: 20px; letter-spacing: 0.1em; font-weight: bold; line-height: 1em; padding: 0.66em; text-decoration: none; width:250px; margin-top: 10px; text-align: center; border-radius: 8px; font-family: Hiragino Sans, "ヒラギノ角ゴシック", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", sans-serif; transition: 0.3s; position: relative; overflow: hidden;}
#sec02 ul li dl dd figure.btn a:before{ content: ""; width: 100%; height: 125px; background: #c62c2f; transform: rotate(-22.5deg); position: absolute; left: -25%; bottom: 0;}
#sec02 ul li dl dd figure.btn a span{ position: relative; z-index: 3;}
#sec02 ul li dl dd figure.btn a:hover{ opacity: 0.7;}
@media screen and (max-width: 767px) {
#sec02 ul li{ background: #fff; border-radius:0; margin-bottom:3%; padding:3% 1.5% 0;}
#sec02 ul li dl dt{ width:44%; position: relative; padding-left: 14%; vertical-align: top;}
#sec02 ul li dl dt span{ position: absolute; left: 0; top: 0; width: 10vw;}
#sec02 ul li dl dt figure{ display:inline-block; vertical-align: middle;}
#sec02 ul li dl dd{ vertical-align:top; padding-right: 3%;}
#sec02 ul li h4{ background: #ffffcc; color: #444; text-align: center; font-size:3.5vw; margin: 0 3% 3%; border-radius: 6vw;}
#sec02 ul li dl dd h5{ font-size:3vw; line-height: 1.25em;}
#sec02 ul li dl dd .price span{ font-size:3vw; margin-right: 1em;}
#sec02 ul li dl dd .price span span:before{ width:12vw; height:1px; bottom: 1.5vw;}
#sec02 ul li dl dd .price strong{ font-size:4.5vw;}
#sec02 ul li dl dd .price strong small{ font-size:3vw;}
#sec02 ul li dl dd figure.btn a{ display:block; font-size:3vw; padding: 0.75em; width:100%; margin-top:3%;}
#sec02 ul li dl dd figure.btn a:before{ content: ""; width: 100%; height: 125px; background: #c62c2f; transform: rotate(-22.5deg); position: absolute; left: -25%; bottom: 0;}
#sec02 ul li dl dd figure.btn a span{ position: relative; z-index: 3;}
#sec02 ul li dl dd figure.btn a:hover{ opacity: 0.7;}
}


/*sec03*/
#sec03{ padding: 20px 0 40px;}
#sec03 h3{ text-align: center; font-size: 26px; line-height: 1em; color: #4e79b8; margin-bottom: 15px;}
#sec03 h3 strong{ display: inline-block; position: relative;}
#sec03 h3 strong:before{ content: ""; width: 26px; height: 1px; background: #4e79b8; transform: rotate(60deg); position: absolute; left: -1em; bottom: 0.5em;}
#sec03 h3 strong:after{ content: ""; width: 26px; height: 1px; background: #4e79b8; transform: rotate(-60deg); position: absolute; right: -1em; bottom: 0.5em;}
#sec03 h2{ text-align: center; font-size: 32px; line-height: 1.25em; position: relative; z-index: 5; margin-bottom: 30px;}
#sec03 h2 strong{ display: inline-block; position: relative;}
#sec03 h2 strong:before{ content: "※1"; font-size: 9px; line-height: 1em; position: absolute; left:55px; top: -0.5em;}
#sec03 h2 span.bg_y{
background: -moz-linear-gradient(top, rgba(255,255,205,0) 0%,rgba(255,255,205,0) 60%, rgba(255,255,205,1.0) 61%, rgba(255,255,205,1.0) 100%);
background: -webkit-linear-gradient(top, rgba(255,255,205,0) 0%,rgba(255,255,205,0) 60%, rgba(255,255,205,1.0) 61%, rgba(255,255,205,1.0) 100%);
background: linear-gradient(to bottom, rgba(255,255,205,0) 0%,rgba(255,255,205,0) 60%, rgba(255,255,205,1.0) 61%, rgba(255,255,205,1.0) 100%);
}
#sec03 ul{ border: 1px solid #6d5b50; display: table; width: 100%;}
#sec03 ul li{ display: table-cell; vertical-align: middle; position: relative;}
#sec03 ul li span{ position: absolute; left: 10px; bottom: 10px;}
@media screen and (max-width: 767px) {
#sec03{ padding:0 0 9%;}
#sec03 h3{ font-size:4.5vw; margin-bottom:3%;}
#sec03 h3 strong:before{ width:4.5vw;}
#sec03 h3 strong:after{ width:4.5vw}
#sec03 h2{ font-size:6vw; margin-bottom:6%;}
#sec03 h2 strong:before{ font-size:2vw; left:16vw; top: -0.5em;}
#sec03 ul{ table-layout: fixed;}
#sec03 ul li:nth-child(2){ background: #fff; width: 16.6666%;}
#sec03 ul li span{ left:2vw; bottom:2vw;}
#sec03 ul li span img{ height:12vw;}
}


/*sec04*/
#sec04{ padding: 0 0 70px;}
#sec04 .super{ vertical-align: super; font-size: 50%;}
#sec04 h2{ text-align: center; font-size: 32px; letter-spacing: 0.05em; color: #444; margin-bottom: 15px;}
#sec04 h2 span{ display: inline-block; vertical-align: middle; margin-right: 10px; width: 70px;}
#sec04 h2 strong{ color: #4e79b8; display: inline-block; position: relative;}
#sec04 h2 strong:before{ content: "※1"; font-size: 9px; line-height: 1em; position: absolute; right: -0.5em; top: 0.25em;}
#sec04 dl{ border: 1px solid #4e79b8; border-radius: 8px; margin-bottom: 20px;}
#sec04 dl dt{ background: #4e79b8; color: #fff; text-align: center; font-size: 28px; line-height:1.25em; padding: 1em; position: relative; border-radius: 6px 6px 0 0}
#sec04 dl dt:after{ content: ""; width: 0; height: 0; border-style: solid; border-width: 15px 95px 0 95px; border-color: #4e78b8 transparent transparent transparent; position: absolute; left: 0; right: 0; bottom: -15px; margin: auto;}
#sec04 dl dt span.ico{ position: absolute; left: 10px; top: -30px;}
#sec04 dl dd{ padding: 30px; text-align: center;}
#sec04 dl dd h3{ text-align: center; font-size: 22px; letter-spacing: 0.1em; line-height: 1.5em; color: #444; margin-bottom: 40px;}
#sec04 dl dd h3 strong{ font-size: 34px; line-height: 1.5em;}
#sec04 dl dd h3 strong.pink{ color: #ff6b9b;}
#sec04 dl dd ul{ letter-spacing: -1em;}
#sec04 dl dd ul li{ display: inline-block; vertical-align: top; letter-spacing: 0; margin: 0 10px; background: #eee; border-radius: 0 0 4px 4px; position: relative;}
#sec04 dl dd ul li span.ico{ position: absolute; left: 10px; top: -25px;}
#sec04 dl dd ul li p{ font-size: 16px; line-height: 2.5em; padding: 15px;}
#sec04 dl dd ul li:first-child p{ line-height: 1.25em;}
#sec04 ol.notice li{ display: inline-block; font-size: 12px; line-height: 1em; color: #444;}
#sec04 ol.notice li:last-child:before{ content: "/"; margin: 0 0.25em;}
@media screen and (max-width: 767px) {
#sec04{ padding:0 0 9%;}
#sec04 h2{ font-size:7vw; line-height: 1.25em; text-align: left; margin-bottom:3%; padding:3% 3% 3% 30%; position: relative;}
#sec04 h2 span{ width:21vw; position: absolute; left: 6vw; top: 0;}
#sec04 h2 strong:before{ font-size:2vw; right: -1em; top: -0.25em;}
#sec04 dl{ border-radius:1.5vw; margin-bottom:3%;}
#sec04 dl dt{ font-size:4.5vw; border-radius:1.25vw 1.25vw 0 0; text-align: left; padding: 0.25em 0.5em 0.5em 33%;}
#sec04 dl dt:after{ border-width:2.5vw 15vw 0 15vw; bottom:-2.4vw;}
#sec04 dl dt span.ico{ left:3vw; top: -1.5vw; width: 24vw;}
#sec04 dl dd{ padding:6% 0 0; border-radius: 0 0 1.5vw 1.5vw; overflow: hidden;}
#sec04 dl dd h3{ font-size:3.5vw; letter-spacing: 0.1em; margin-bottom:9%;}
#sec04 dl dd h3 strong{ font-size:6vw; line-height: 1.25em;}
#sec04 dl dd ul li{ width: 31.3333%; margin: 0 auto; border-radius: 0;}
#sec04 dl dd ul li:nth-child(1){ margin-right: 2%;}
#sec04 dl dd ul li:nth-child(2){ margin:0 1%;}
#sec04 dl dd ul li:nth-child(3){ margin-left: 2%;}
#sec04 dl dd ul li span.ico{ left:1.5vw; top:-4.5vw; width: 33.3333%;}
#sec04 dl dd ul li p{ font-size:2.5vw; line-height: 2.5em; padding:6% 3%;}
#sec04 dl dd ul li:first-child p{ line-height: 1.25em;}
#sec04 ol.notice li{ display:block; font-size:3vw; line-height: 1.5em;}
#sec04 ol.notice li:last-child:before{ display: none;}
}


/*sec05*/
#sec05_1{ background: #fafafa; padding-bottom: 70px;}
#sec05_2{ background: #eee; padding-bottom: 70px;}
#sec05_3{ background: #eee; padding-bottom: 70px;}
@media screen and (max-width: 767px) {
#sec05_1{ padding-bottom:6%;}
#sec05_2{ padding-bottom:6%;}
#sec05_3{ padding-bottom:6%;}
}

.sec05 .super{ vertical-align: super; font-size: 50% !important; background: none !important; color: inherit !important; padding: 0 !important;}
.sec05 .sec05_tit{ background: #fbf7cc; margin-bottom: 40px;}
.sec05 .sec05_tit_in{ width: 1000px; margin: 0 auto; position: relative;}
.sec05 .sec05_tit_in span.ico1{ position: absolute; left: 0; bottom: 0;}
.sec05 .sec05_tit_in span.ico2{ position: absolute; right: 0; bottom: 0;}
.sec05 .sec05_tit_in h2{ text-align: left; display: inline-block; font-size: 27px; line-height: 1.25em; padding: 30px 175px; color: #444; font-family: "游ゴシック体", YuGothic, "YuGothic M", sans-serif;}
.sec05 .sec05_tit_in h2 span{ display: inline-block; background: #fff; color: #bea336; font-size: 17px; line-height: 1em; padding: 0 0.5em; border-radius: 30px; margin-bottom: 10px;}
.sec05 .sec05_tit_in h2 strong{ color: #000;
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 60%, rgba(255,255,255,1.0) 61%, rgba(255,255,255,1.0) 100%);
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 60%, rgba(255,255,255,1.0) 61%, rgba(255,255,255,1.0) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 60%, rgba(255,255,255,1.0) 61%, rgba(255,255,255,1.0) 100%);
}
@media screen and (max-width: 767px) {
.sec05 .sec05_tit{ margin-bottom:6%;}
.sec05 .sec05_tit_in{ width:100%;}
.sec05 .sec05_tit_in h2{ font-size:4.5vw; padding:1.5% 18% 3% 18%;}
.sec05 .sec05_tit_in h2 span{ font-size:2.5vw; margin-bottom:1%;}
}

#sec05_1 .sec05_tit{ background: #fbf7cc;}
#sec05_1 .sec05_tit_in span.ico1{ left: 40px;}
#sec05_1 .sec05_tit_in span.ico2{ right: 20px;}
#sec05_2 .sec05_tit{ background: #d1e3e5;}
#sec05_2 .sec05_tit_in span.ico1{ left: 70px; bottom: -15px;}
#sec05_2 .sec05_tit_in span.ico2{ right: 20px;}
#sec05_2 .sec05_tit_in h2{ padding: 5px 175px 15px;}
#sec05_2 .sec05_tit_in h2 span{ color: #4e79b8;}
#sec05_3 .sec05_tit{ background: #d7e2d6;}
#sec05_3 .sec05_tit_in span.ico1{ left: 60px; bottom: -15px;}
#sec05_3 .sec05_tit_in span.ico2{ right: -30px;}
#sec05_3 .sec05_tit_in h2 span{ color: #bbccba;}
@media screen and (max-width: 767px) {
#sec05_1 .sec05_tit_in span.ico1{ width: 16.5vw; left:3vw;}
#sec05_1 .sec05_tit_in span.ico2{ width: 30vw; right:-4.5vw;}
#sec05_2 .sec05_tit_in span.ico1{ width: 12.5vw; left:6vw; bottom: -1.5vw;}
#sec05_2 .sec05_tit_in span.ico2{ width: 30vw; right:-4.5vw;}
#sec05_2 .sec05_tit_in h2{ padding:1.5% 18% 3% 18%;}
#sec05_3 .sec05_tit_in span.ico1{ width: 12.5vw; left:6vw; bottom: -1.5vw;}
#sec05_3 .sec05_tit_in span.ico2{ width: 30vw; right:-9vw;}
}

.sec05 .maincontent{ width: 900px;}
.sec05 .comment01{ padding-left: 160px;}
.sec05 .comment02{ padding-right: 160px;}
.sec05 .comment01 figure,
.sec05 .comment02 figure{ text-align: center; margin-bottom: 20px;}
.sec05 .comment01 figure img,
.sec05 .comment02 figure img{ border-radius: 4px;}
.sec05 p.notice{ margin-top: 40px; font-size: 12px; color: #444;}
@media screen and (max-width: 767px) {
.sec05 .maincontent{ width:94%;}
.sec05 .comment01{ padding-left:4.5%;}
.sec05 .comment02{ padding-right:4.5%;}
.sec05 .comment01 figure{ margin-right:24.5%; margin-bottom:3%;}
.sec05 .comment02 figure{ margin-left:24.5%; margin-bottom:3%;}
.sec05 .comment01 figure img,
.sec05 .comment02 figure img{ border-radius:1vw;}
.sec05 p.notice{ margin:3%; font-size:3vw;}
}

.sec05 dl{ margin-bottom: 20px; display: flex; align-items: center;}
.sec05 dt{ width: 90px;}
.sec05 dd{ width: calc(100% - 120px); background: #fff; margin-left: 30px; padding: 20px; border-radius: 8px; position: relative;}
.sec05 dd:before{ content: ""; width: 14px; height: 22px; background: url("../images/sec05_comment_ico1.png"); background-size: cover; position: absolute; left: -14px; top: calc(50% - 11px);}
.sec05 dd p{ font-size: 22px; line-height: 1.5em; color: #444;}
.sec05 dd p strong{ background: #fbf7cc; color: #000;}
.sec05 .comment01 dl{ flex-direction: row-reverse;}
.sec05 .comment01 dl dd{ margin: 0; margin-right: 30px;}
.sec05 .comment01 dl dd:before{ background: url("../images/sec05_comment_ico2.png"); background-size: cover; left: auto; right: -14px;}
@media screen and (max-width: 767px) {
.sec05 dl{ margin-bottom:3%;}
.sec05 dt{ width:20%;}
.sec05 dd{ width:75.5%; margin-left:4.5%; padding:3% 4.5%; border-radius:1vw;}
.sec05 dd:before{ width:3vw; height:4.5vw; left:-2.8vw; top: calc(50% - 2.25vw);}
.sec05 dd p{ font-size:3.5vw;}
.sec05 .comment01 dl dd{ margin:0; margin-right:4.5%;}
.sec05 .comment01 dl dd:before{ left:auto; right:-2.8vw;}
}


/*sec06*/
#sec06{ padding: 90px 0 70px;}
#sec06 .maincontent{ border: 3px solid #4e79b8; border-radius: 20px; padding: 70px 0 50px;}
#sec06 h2{ text-align: center; font-size: 26px; line-height: 1.25em; position: relative; z-index: 5; margin-bottom: -30px;}
#sec06 h2 strong{ display: inline-block; background: #7c9fd3; color: #fff; padding: 20px 160px; border-radius: 40px;}
#sec06 ul{ display: table; table-layout: fixed; width: 100%;}
#sec06 ul li{ display: table-cell; vertical-align: top; padding: 10px 50px;}
#sec06 ul li:first-child{ border-right: 1px solid #dcdcdc;}
#sec06 ul li figure{ text-align: center; margin-bottom: 40px;}
#sec06 ul li h3{ margin-bottom: 40px; text-align: center;}
#sec06 ul li p{ font-size: 18px; line-height: 1.75em;}
@media screen and (max-width: 767px) {
#sec06{ padding:9% 0;}
#sec06 .maincontent{ border-radius:3vw; padding:9% 0 6%;}
#sec06 h2{ font-size:4.5vw; margin-bottom:-6vw;}
#sec06 h2 strong{ display:block; padding:3%; margin: 0 6%;}
#sec06 ul li{ padding:0 3%;}
#sec06 ul li:first-child{ border-right: 1px solid #dcdcdc;}
#sec06 ul li figure{ margin-bottom:6%;}
#sec06 ul li h3{ margin-bottom:6%;}
#sec06 ul li p{ font-size:3.5vw; line-height: 1.75em;}
}


/*sec07*/
#sec07{ background: #f2f7f8; padding: 90px 0;}
@media screen and (max-width: 767px) {
#sec07{ padding: 9% 3% 12%;}
}

#sec07 figure.btn{ position: absolute; left:0; right: 0; bottom: 20px; margin: auto; width: calc(100% - 20px);}
#sec07 figure.btn a{ display: block; background: #b72124; color: #fff; font-size: 20px; letter-spacing: 0.1em; font-weight: bold; line-height: 1em; padding: 0.66em; text-decoration: none; text-align: center; border-radius: 8px; font-family: Hiragino Sans, "ヒラギノ角ゴシック", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", sans-serif; transition: 0.3s; position: relative; overflow: hidden;}
#sec07 figure.btn a:before{ content: ""; width: 100%; height: 125px; background: #c62c2f; transform: rotate(-22.5deg); position: absolute; left: -25%; bottom: 0;}
#sec07 figure.btn a span{ position: relative; z-index: 3;}
#sec07 figure.btn a:hover{ opacity: 0.7;}
@media screen and (max-width: 767px) {
#sec07 figure.btn{ position: static;}
#sec07 figure.btn a{ display:block; font-size:5vw; padding: 1em; width:94%; margin:3% auto 0;}
#sec07 figure.btn a:before{ content: ""; width: 100%; height: 125px; background: #c62c2f; transform: rotate(-22.5deg); position: absolute; left: -25%; bottom: 0;}
#sec07 figure.btn a span{ position: relative; z-index: 3;}
#sec07 figure.btn a:hover{ opacity: 0.7;}
}

#sec07 ul{ width: calc(100% + 20px); margin-left: -10px; display: table; table-layout: fixed; border-collapse: separate; border-spacing: 10px 0;}
#sec07 ul li{ display: table-cell; vertical-align: top; background: #fff; border-radius: 8px 8px 0 0; padding-bottom: 90px; position: relative;}
#sec07 ul li h3{ background: #4e79b8; color: #fff; font-size: 24px; letter-spacing: -0.05em; line-height: 1.25em; padding: 10px; border-radius: 6px 6px 0 0;}
#sec07 ul li:nth-child(2) h3{ background:#3c7a89;}
#sec07 ul li:nth-child(3) h3{ background:#89a788;}
#sec07 ul li h3 span{ display: inline-block; vertical-align: middle; width: 55px; margin-right: 5px;}
#sec07 ul li h3 strong{ display: inline-block; vertical-align: middle;}
@media screen and (max-width: 767px) {
#sec07 ul{ width:100%; margin:0 auto; display:block; border-collapse:collapse; border-spacing:0;}
#sec07 ul li{ display:block; border-radius:1.5vw 1.5vw 0 0; padding-bottom:6%; margin-bottom: 7.5%;}
#sec07 ul li:last-child{ margin-bottom: 0;}
#sec07 ul li h3{ font-size:5vw; letter-spacing:0; padding:1% 3%; border-radius:1.25vw 1.25vw 0 0;}
#sec07 ul li h3 span{ width:15vw; margin-right:3%;}
}

#sec07 dl{ display: table; table-layout: fixed; width: calc(100% - 20px); border-collapse: collapse; border-spacing: 0; margin: 0 auto;}
#sec07 dl dt{ display: table-cell; vertical-align: middle; width: 120px;}
#sec07 dl dd{ display: table-cell; vertical-align: middle; padding-top: 30px;}
#sec07 dl dd h4{ font-size: 18px; line-height: 1.25em; margin-bottom: 0.66em;}
#sec07 dl dd h4 span{ display: block; font-size: 16px; line-height: 1em; font-weight: normal; margin-top: 0.33em;}
#sec07 dl dd p{ font-size: 16px; line-height: 1.5em;}
#sec07 dl dd .price{ letter-spacing: -1em; font-family: Hiragino Sans, "ヒラギノ角ゴシック", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", sans-serif;}
#sec07 dl dd .price span{ display: inline-block; vertical-align: middle; letter-spacing: 0; font-size: 12px; line-height: 1em; position: relative; margin-right: 0.5em;}
#sec07 dl dd .price span span:before{ content: ""; width: 48px; height: 2px; background: #564134; position: absolute; left: 0; bottom: 5px; transform: rotate(-11.25deg);}
#sec07 dl dd .price strong{ display: inline-block; vertical-align: middle; letter-spacing: 0; font-size: 16px; line-height: 1em; margin-top: -0.5em; color: #c32d2d; font-family: Hiragino Sans, "ヒラギノ角ゴシック", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", sans-serif;}
#sec07 dl dd .price strong small{ display: inline-block; vertical-align: middle; font-size: 12px; line-height: 1em;}
@media screen and (max-width: 767px) {
#sec07 dl{ width: 100%;}
#sec07 dl dt{ width:36.3333%; padding-left: 3.3333%;}
#sec07 dl dd{ padding:4.5% 3% 4.5% 0;}
#sec07 dl dd h4{ font-size:5vw; margin-bottom:0.75em;}
#sec07 dl dd h4 span{ font-size:4vw; margin-top: 0.25em;}
#sec07 dl dd p{ font-size:3.5vw; line-height: 1.5em; margin-bottom: 0.75em;}
#sec07 dl dd .price span{ font-size:3vw; margin-right: 1em;}
#sec07 dl dd .price span span:before{ width:10.5vw; height:1px; bottom: 1.5vw;}
#sec07 dl dd .price strong{ font-size:5vw; margin: 0;}
#sec07 dl dd .price strong small{ font-size:3vw;}
}

p.follow{ text-align: center; padding: 60px 0;}
p.follow a{ background: #999; color: #fff; display: inline-block; padding: 0.25em 1.5em; font-size: 16px; text-decoration: none; transition: 0.3s; border-radius: 20px;}
p.follow a:hover{ background: #666;}
@media screen and (max-width: 767px) {
p.follow{ padding:9% 0;}
p.follow a{ font-size: 3vw;}
}


@media screen and (min-width: 768px) {
.smp{ display:none !important;}
}
@media screen and (max-width: 767px) {
.pc{ display:none !important;}
}