/*!
Theme Name: mitsumori-shindan
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: mitsumori-shindan
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

mitsumori-shindan is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
	color: #3E3C31;
scroll-behavior: smooth;

}

body {
    -webkit-text-size-adjust: none;
	background: #EFEFE3;
	font-size: 14px;
	font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #3E3C31;
	
}
p{line-height: 180%;}
li{list-style: none;}

/*SP*/
@media screen and (max-width: 480px){
	body{font-size: 14px;font-family:sans-serif;}
	}

a{text-decoration: none; color: #A27142;}
a:hover{transition: 0.6s; color: #C48549;}

header{width: 100%; height: 70px; margin: 0; text-align: center;}
#fv{width: 100%; height: 550px; display: block; background: url(images/fv-pc.jpg) no-repeat; background-size: cover;background-position: center;  }

#fv .container{width: 1000px; height: 550px; margin: auto; display: block; padding: 60px 20px;}
.fv-container-wrap{display: flex;align-items:flex-end}
.fv-container-wrap .box{width: 500px;}
.fv-container-wrap .catch{font-size: 20px; text-align: center; margin-bottom: 30px;}
.fv-container-wrap .catch-2{font-size: 28px; text-align: center; position: relative ; }
.fv-container-wrap .catch-2::after{width: 226px; height: 20px; content: "";
     background: url(images/wave.png) no-repeat; background-size: contain; background-position: center; 
     position: absolute; bottom: -10px; left: calc(50% - 113px); display: block;}
.fv-container-wrap h1{font-size: 50px; text-align: center; font-feature-settings: "palt"; letter-spacing:-3px; margin-bottom: 60px;}
.button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 375px;
    margin:0 auto;
    padding: 20px 2em;
    border: none;
    border-radius: 42px;
    background-color: #A27142;
    color: #fff;
    font-weight: 500;
    font-size: 22px;
}

.button::after {
    width: 36px;
    height: 20px;
    margin-left: 10px;
    background: url(images/arrow-white.png) no-repeat;
    background-size: contain;
    content: '';
}

.button:hover {
    background-color: #C48549;
    transition: .6s;
}

.medals-wrap{display: flex; justify-content:space-between;}
.medals-wrap .medal{width: 140px; height: 140px; border-radius: 70px; 
  text-align: center; display: flex; background: #E1D6BC;align-items: center;justify-content: center }
.medals-wrap .medal p{color: #745537; font-size: 24px; line-height: 135%; font-weight: 600;}
.medals-wrap .medal p span{font-size: 40px; font-weight: 600;color: #745537;}

.fv-container-wrap .box-sp{display: none;}
br.sp{display: none;}

@media screen and (max-width: 480px){
#fv{width: 100%; height: 545px; display: block; background: url(images/fv-sp.jpg) no-repeat; 
  background-size: cover;background-position: center;  }

#fv .container{width: 100%; height: 545px; margin: auto; display: block; padding: 20px 20px;}
.fv-container-wrap{display: flex;align-items:flex-end}
.fv-container-wrap .box{width: 100%;}
.fv-container-wrap .box:last-child{display: none;}
.fv-container-wrap .box-sp{display:block; width: 100%;}
.fv-container-wrap .catch{font-size: 16px; text-align: center; margin-bottom: 10px; color: #ffffff;}
.fv-container-wrap .catch-2{font-size: 20px; text-align: center; position: relative ;  color: #ffffff; margin-bottom: 20px;}
.fv-container-wrap .catch-2::after{width: 180px; height: 8px; content: "";
     background: url(images/wave-white.png) no-repeat; background-size: contain; background-position: center; 
     position: absolute; bottom: -10px; left: calc(50% - 90px); display: block; }
.fv-container-wrap h1{color: #ffffff;font-size: 30px; text-align: center; font-feature-settings:inherit; 
  letter-spacing:normal; margin-bottom: 20px; line-height: 130%; margin-top: 0;}
  br.sp{display: block;}
  .button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 340px;
    margin:20px auto;
    padding: 20px 2em;
    border: none;
    border-radius: 42px;
    background-color: #A27142;
    color: #fff;
    font-weight: 500;
    font-size: 20px;
}

.button::after {
    width: 36px;
    height: 20px;
    margin-left: 10px;
    background: url(images/arrow-white.png) no-repeat;
    background-size: contain;
    content: '';
}

.button:hover {
    background-color: #C48549;
    transition: .6s;
}

.medals-wrap{display: flex; justify-content:space-between; width: 100%;}
.medals-wrap .medal{width: 100px; height: 100px; border-radius: 50px; 
  text-align: center; display: flex; background: #E1D6BC;align-items: center;justify-content: center }
.medals-wrap .medal p{color: #745537; font-size: 18px; line-height: 135%; font-weight: 600;}
.medals-wrap .medal p span{font-size: 20px; font-weight: 600;color: #745537;}
	}


.nayami-wrap{width: 1000px; margin: 50px auto; display: block;}
p.nayami{font-size: 30px; text-align: center; margin-bottom: 50px;}
.nayami-container{width: 1000px; display: flex; flex-wrap: wrap; justify-content: space-between;}
.nayami-container::after{content: ""; width: 137px; height: 142px; background: url(images/arrow-2.png) no-repeat; background-size: contain; display: block; margin: 0 auto;}
.nayami-container .nayami-box{width: 32%; height: auto;}
.nayami-container .nayami-box h2{font-size: 16px; position: relative;padding-left: 50px; line-height: 135%;}
.nayami-container .nayami-box h2::before{content: ""; width: 40px; height: 60px; position:absolute;
   background: url(images/check.png) no-repeat; background-size: contain; left:0px ; }
.nayami-container .nayami-box img{width: 250px; height: auto; object-fit: contain;} 

@media screen and (max-width: 480px){
.nayami-wrap{width: 94%; margin: 50px auto; display: block;}
p.nayami{font-size: 24px; text-align: center; margin-bottom: 50px;}
.nayami-container{width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between;}
.nayami-container::after{content: ""; width: 137px; height: 142px; background: url(images/arrow-2.png) no-repeat; background-size: contain; display: block; margin: 0 auto;}
.nayami-container .nayami-box{width: 100%; height: auto;}
.nayami-container .nayami-box h2{font-size: 16px; position: relative;padding-left: 50px; line-height: 135%;}
.nayami-container .nayami-box h2::before{content: ""; width: 40px; height: 60px; position:absolute;
   background: url(images/check.png) no-repeat; background-size: contain; left:0px ; }
.nayami-container .nayami-box img{width: 80%; height: auto; object-fit: contain; display: block; margin: auto;} 
}

h2.solution {width: 70%;text-align: center; display: block; margin: 20px auto;
  position: relative;
  color:#ffffff;
  background: #38372F;
  transform: skewX(160deg);
  padding: 10px 0;
  font-size: 30px;
  font-weight: 500;
}
h2.solution span {
  display: block;
  transform: skewX(-160deg); color: #ffffff;
} 
img.solution{width: 550px; height: 500px; object-fit: contain; margin: 20px auto; display: block;}

@media screen and (max-width: 480px){
h2.solution {width: 100%;text-align: center; display: block; margin: 20px auto;
  position: relative;
  color:#ffffff;
  background: #38372F;
  transform: skewX(170deg);
  padding: 10px 0;
  font-size: 20px;
  font-weight: 500;
}
h2.solution span {
  display: block;
  transform: skewX(-170deg); color: #ffffff;
} 
img.solution{width: 90%; height: auto; object-fit: contain; margin: 20px auto 0; display: block;}
}

.common-wrap{width: 1000px; margin: 80px auto; display: block;}

h2.common{font-size: 36px ; text-align: center;margin: 30px auto 80px;
  align-items: center; 
  display: flex;
  justify-content: center;}
h2.common::before,
h2.common::after {
  background-color: #38372F; 
  content: "";
  height: 2px; 
  width: 120px; 
}
h2.common::before {
  margin-right: 15px; 
}
h2.common::after {
  margin-left: 15px;
}
h3{font-size: 32px; text-align: center; letter-spacing: 0.01em;}
h3 span{background: #ffffff; font-size: 36px; margin: 0 10px; padding: 1px 10px;}

h3.common{font-size: 30px; text-align: center; margin: 50px auto; display: block;}

@media screen and (max-width: 480px){
.common-wrap{width: 94%; margin: 50px auto; display: block;}

h2.common{font-size: 20px ; text-align: center;margin: 10px auto 40px;
  align-items: center; 
  display: flex;
  justify-content: center;}
h2.common::before,
h2.common::after {
  background-color: #38372F; 
  content: "";
  height: 2px; 
  width: 30px; 
}
h2.common::before {
  margin-right: 10px; 
}
h2.common::after {
  margin-left: 10px;
}
h3{font-size: 18px; text-align: center; letter-spacing: 0.01em;}
h3 span{background: #ffffff; font-size:20px; margin: 0 10px; padding: 1px 10px;}

h3.common{font-size: 18px; text-align: center; margin: 50px auto; display: block;}
}

.exp-wrap{width: 100%; height: auto; border:solid 1px #38372F; padding:45px; margin:80px auto; display:flex; flex-wrap: wrap; justify-content: space-between;}
.exp-wrap .image-box{width: 33%; height: auto; margin-bottom: 50px;}
.exp-wrap .image-box:last-child{margin-bottom: 0;}
.exp-wrap .image-box img{width: 100%; object-fit: contain;}
.exp-wrap .text-box{width: 65%; }
.exp-wrap .text-box p{font-size: 14px; font-weight: 400; line-height: 200%; margin-bottom: 30px;}

.exp-wrap .point-box{width: 30%;}
.exp-wrap .point-box .pointNum{font-size: 20px ; text-align: center;margin: 30px auto;
  align-items: center; 
  display: flex;
  justify-content: center;}
.exp-wrap .point-box .pointNum::before,
.exp-wrap .point-box .pointNum::after {
  background-color: #38372F; 
  content: "";
  height: 2px; 
  width: 60px; 
}
.exp-wrap .point-box .pointNum::before {
  margin-right: 15px; 
}
.exp-wrap .point-box .pointNum::after {
  margin-left: 15px;
}
.exp-wrap .point-box .pointNum span{font-size:40px ; margin: -10px 0 0 10px;}
.exp-wrap .point-box h2{font-size: 26px; text-align: center; }
.exp-wrap .point-box h2 span{background: #ffffff; padding: 2px 10px;}
.exp-wrap .point-box h2.palt{letter-spacing: -0.1em;}
.exp-wrap .point-box img{width: 180px; height: 180px; object-fit: contain; margin:10px auto; display: block;}
.exp-wrap .point-box p{font-size: 16px; margin:20px}

@media screen and (max-width: 480px){
.exp-wrap{width: 100%; height: auto; border:solid 1px #38372F; padding:30px; margin:30px auto; display:flex; flex-wrap: wrap; justify-content: space-between;}
.exp-wrap .image-box{width: 100%; height: auto; margin-bottom: 50px;}
.exp-wrap .image-box:last-child{margin-bottom: 0;}
.exp-wrap .image-box img{width: 100%; object-fit: contain;}
.exp-wrap .text-box{width: 100%; }
.exp-wrap .text-box p{font-size: 16px; font-weight: 400; line-height: 200%; margin-bottom: 30px;}
.order-1{order:1}
.order-2{order:2}
.order-3{order:3}
.order-4{order:4}

.exp-wrap .point-box{width: 100%;}
.exp-wrap .point-box .pointNum{font-size: 20px ; text-align: center;margin: 30px auto;
  align-items: center; 
  display: flex;
  justify-content: center;}
.exp-wrap .point-box .pointNum::before,
.exp-wrap .point-box .pointNum::after {
  background-color: #38372F; 
  content: "";
  height: 2px; 
  width: 60px; 
}
.exp-wrap .point-box .pointNum::before {
  margin-right: 15px; 
}
.exp-wrap .point-box .pointNum::after {
  margin-left: 15px;
}
.exp-wrap .point-box .pointNum span{font-size:40px ; margin: -10px 0 0 10px;}
.exp-wrap .point-box h2{font-size: 22px; text-align: center; font-weight: 600; }
.exp-wrap .point-box h2 span{background: #ffffff; padding: 2px 10px;font-weight: 600;}
.exp-wrap .point-box h2.palt{letter-spacing: -0.1em;}
.exp-wrap .point-box img{width: 180px; height: 180px; object-fit: contain; margin:10px auto; display: block;}
.exp-wrap .point-box p{font-size: 16px; margin:0px}
}

.line-wrap{width: 1000px; background: #ffffff; border-radius: 10px; margin: 50px auto; 
  display: flex; padding: 30px;flex-wrap: wrap;justify-content: space-between; align-items: center;}
.line-wrap .line-image{width: 130px; height: auto;}
.line-wrap .line-image img{width: 100%; object-fit: contain;}
.line-wrap .line-catch{width: 460px;}
.line-wrap .line-catch h3.catch{font-size: 20px; text-align: center; position: relative ; margin-bottom: 30px; }
.line-wrap .line-catch h3.catch::after{width: 366px; height:14px; content: "";
     background: url(images/wave-2.png) no-repeat; background-size: contain; background-position: center; 
     position: absolute; bottom: -20px; left: calc(50% - 183px); display: block;}
.line-wrap .line-catch p{font-size: 14px; font-weight: 400; text-align: center; margin-bottom: 20px;}

.line-wrap .line-btn, .flow-wrap .dscr .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 310px;
    height: 70px;
    margin:0 auto;
    padding: 20px 2em;
    border: none;
    border-radius: 42px;
    background-color: #59BF39;
    color: #fff;
    font-weight: 500;
    font-size: 22px;
}
.flow-wrap .dscr .btn{width: 260px;
    height: 70px;float: right; margin-left: 100px;}

.line-btn::before, .flow-wrap .dscr .btn::before {
    width: 35px;
    height: 35px;
    margin-right: 20px;
    margin-top: 5px;
    background: url(images/line-icon.png) no-repeat;
    background-size: contain;
    content: '';
}

.line-btn:hover, .flow-wrap .dscr .btn:hover {
    background-color: #64E03E;
    transition: .6s;
}

@media screen and (max-width: 480px){
.line-wrap{width: 100%; background: #ffffff; border-radius: 10px; margin: 50px auto 0; 
  display: flex; padding: 30px;flex-wrap: wrap;justify-content: space-between; align-items: center;}
.line-wrap .line-image{width: 130px; height: auto; margin: -40px auto 0;}
.line-wrap .line-image img{width: 100%; object-fit: contain;}
.line-wrap .line-catch{width: 100%;}
.line-wrap .line-catch h3.catch{font-size: 20px; text-align: center; position: relative ; margin-bottom: 30px; }
.line-wrap .line-catch h3.catch::after{width: 180px; height:14px; content: "";
     background: url(images/wave.png) no-repeat; background-size: contain; background-position: center; 
     position: absolute; bottom: -20px; left: calc(50% - 90px); display: block;}
.line-wrap .line-catch p{font-size: 14px; font-weight: 400; text-align: center;}

.line-wrap .line-btn, .flow-wrap .dscr .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 310px;
    height: 70px;
    margin:0 auto;
    padding: 20px 2em;
    border: none;
    border-radius: 42px;
    background-color: #59BF39;
    color: #fff;
    font-weight: 500;
    font-size: 22px;
}
.flow-wrap .dscr .btn{width: 260px;
    height: 70px;float: right; margin-left: 100px;}

.line-btn::before, .flow-wrap .dscr .btn::before {
    width: 35px;
    height: 35px;
    margin-right: 20px;
    margin-top: 5px;
    background: url(images/line-icon.png) no-repeat;
    background-size: contain;
    content: '';
}

.line-btn:hover, .flow-wrap .dscr .btn:hover {
    background-color: #64E03E;
    transition: .6s;
}

}

h2.sekkei{font-size: 36px; text-align: center; letter-spacing: 0.01em;}
h2.sekkei span.lead{font-size: 24px; margin: 0 10px; padding: 1px 10px; display: block;}
h2.sekkei span.anshin{font-size: 36px; text-align: center; position: relative ; margin-bottom: 30px; }
h2.sekkei span.anshin::after{width: 210px; height:11px; content: "";
     background: url(images/wave-anshin.png) no-repeat; background-size: contain; background-position: center; 
     position: absolute; bottom: -20px; left: 0; display: block;}


img.conf{width: 390px; height: auto; object-fit: contain; display: block; margin: 80px auto 0;}
h2.conf{font-size: 40px; text-align: center; margin: 0 auto 80px;}

p.wonder{font-size: 28px; text-align: center; position: relative ; }
p.wonder::after{width: 240px; height: 50px; content: "";
     background: url(images/bubble.png) no-repeat; background-size: contain; background-position: center; 
     position: absolute; bottom: -50px; left: calc(50% - 120px); display: block;}
img.wonder{width: 300px; height: auto; object-fit: contain; margin: 50px auto 50px; display: block;}     

@media screen and (max-width: 480px){
h2.sekkei{font-size: 24px; text-align: center; letter-spacing: 0.01em;}
h2.sekkei span.lead{font-size: 20px; margin: 0 10px; padding: 1px 10px; display: block;}
h2.sekkei span.anshin{font-size: 24px; text-align: center; position: relative ; margin-bottom: 30px; }
h2.sekkei span.anshin::after{width: 100%; height:11px; content: "";
     background: url(images/wave-anshin.png) no-repeat; background-size: contain; background-position: center; 
     position: absolute; bottom: -20px; left: 0; display: block;}


img.conf{width: 94%; height: auto; object-fit: contain; display: block; margin: 40px auto 0;}
h2.conf{font-size: 30px; text-align: center; margin: 0 auto 50px;font-weight: 600;}

p.wonder{font-size: 16px; text-align: center; position: relative ; }
p.wonder::after{width: 200px; height: 50px; content: "";
     background: url(images/bubble.png) no-repeat; background-size: contain; background-position: center; 
     position: absolute; bottom: -50px; left: calc(50% - 100px); display: block;}
img.wonder{width: 300px; height: auto; object-fit: contain; margin: 50px auto 50px; display: block;}   
}


.table {
    width: 100%;
    text-align: center;
    border-collapse: separate;
    border-spacing: 10px 0px;
    color: #38372F;
    font-size: 18px;
    margin: 80px auto;
    
}

.table thead {
    background: #E1D6BC;
    color: #fff;
}


.table th,
.table td {
    padding: 10px 30px 15px;
    
}
.table th{border-top-left-radius: 10px; border-top-right-radius: 10px; padding: 30px; font-size: 26px;}
.table th.tasha{border-top-left-radius: 0px; border-top-right-radius: 0px; padding: 30px 30px; border-top: solid 20px #EFEFE3; line-height: 50%; font-size: 20px;}

.table th:nth-child(1){width:35%; }
.table th:nth-child(2){width:30%;}
.table tr:nth-child(1n) td {
    background-color: #F9F7F0; ;
}

.table td:nth-child(1){text-align: left!important;}

.table th:nth-child(2),
.table td:nth-child(2),
.table td.pop
 {
  background: #745537;
  color: #ffffff;
}
.table td.even{background: #F9F7F0!important
}

.table td.pop{
    background-color: #8A6F52!important; font-size: 40px; 
}
.table td.pop-odd{
    background-color: #745537!important;font-size: 40px
}
.table td.gray{
    background-color: #E5E5E5!important;font-size: 40px; color: #A2A19E;
}
.table td.gray-odd{
    background-color: #E4E2DC!important;font-size: 40px;color: #A2A19E;
}

.table tr:first-child th:first-child {
    position: relative;
    background-color: #EFEFE3;

}

.table-note{font-size: 12px; color: #ffffff; text-align: center; line-height: 100%; display: block;}

@media screen and (max-width: 480px){
.table_area{width: 94%; border: solid 1px #38372F;display: block;
	margin: 0 auto;
	overflow-x: scroll;
}
  .table {width: 100%;
	min-width: 600px;
font-size: 16px;
margin: 20px auto;}

  .table th{padding: 20px; font-size: 16px;}
.table th.tasha{padding: 20px; border-top: solid 20px #EFEFE3; line-height: 50%; font-size: 16px;}

.table td{padding: 10px;}
.table td.pop{
    background-color: #8A6F52!important; font-size: 20px; 
}
.table td.pop-odd{
    background-color: #745537!important;font-size: 20px
}
.table td.gray{
    background-color: #E5E5E5!important;font-size: 20px; color: #A2A19E;
}
.table td.gray-odd{
    background-color: #E4E2DC!important;font-size: 20px;color: #A2A19E;
}
}


.table-2 {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    border-spacing: 10px 0px;
    color: #38372F;
    font-size: 18px;
    margin: 80px auto 50px;
    
}

.table-2 thead {
    background: #745537;
    
}

.table-2 th,
.table-2 td {width: 50%;
    padding: 15px 30px 15px;  
    
}
.table-2 th:first-child{border-top-left-radius: 10px; background: #745537!important;}
.table-2 th:last-child{border-top-right-radius: 10px;}
.table-2 th{font-size: 20px; color: #ffffff;}

.table-2 tr:nth-child(1n) td {
   background: #ffffff;
}

.table-2 td.odd{background: #F7F5EE!important
}

.table-2 td.even{background: #F3EFE4!important
}

.table-2 td.gray{
    background-color: #F9F7F0!important;
}

.table-2 tr:first-child th:first-child {
    position: relative;
    background-color: #EFEFE3;

}
.price-wrap{display: flex; justify-content:space-evenly; width: 100%; align-items: center; }
.price{font-size: 30px; color: #745537; font-weight: 600;  text-align: center;}
.price .yen{font-size: 20px; color: #745537; }
.price-wrap .btn{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    height: 45px;
    padding: 20px 2em;
    border: none;
    border-radius: 23px;
    background-color: #59BF39;
    color: #fff;
    font-weight: 500;
    font-size: 16px;
}
.sp-line{color: #ffffff; display: block;}
.sp-line-icon{display: none;}
.price-wrap .btn::after{content: ""; display: none;}
.price-wrap .btn:hover {
    background-color: #64E03E;
    transition: .6s;
}
.price-note{text-align: center; font-weight: 400;}

@media screen and (max-width: 480px){
.table-2 {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    border-spacing: 10px 0px;
    color: #38372F;
    font-size: 12px;
    margin: 20px auto 20px;
    
}


.table-2 th,
.table-2 td {
    padding: 10px;  
    
}
.table-2 th:first-child{border-top-left-radius: 10px; background: #745537!important; width: 30%!important;}
.table-2 th:last-child{border-top-right-radius: 10px;width: 70%!important;}
.table-2 th{font-size: 16px; color: #ffffff;}

.price-wrap{display: flex; justify-content:space-evenly; width: 100%; align-items: center; }
.price{font-size: 18px; color: #745537; font-weight: 600;  text-align: center;}
.price .yen{font-size: 12px; color: #745537; }
.price-wrap .btn{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 68px;
    height: 30px;
    padding: 20px 2em;
    border: none;
    border-radius: 23px;
    background-color: #59BF39;
    color: #fff;
    font-weight: 500;
    font-size: 16px;
}

.sp-line{display: none;}

.sp-line-icon{display: block; width: 25px; height: 25px; object-fit: contain;}
.price-wrap .btn:hover {
    background-color: #64E03E;
    transition: .6s;
}
.price-note{text-align: center; font-weight: 400; font-size: 12px;}

}

img.sample{width: 200px; height: auto; object-fit: contain; margin: 30px auto; display: block;}
img.sample-paper{width: 680px; height: auto; object-fit: contain; margin: 30px auto; display: block;}

.note-sample{width: 75%; margin: 30px auto; display: block;}

.sample-wrap{width: 75%; display: block; margin: 30px auto;}
.sample-wrap .container{display: flex; flex-wrap: wrap; justify-content: space-between;}
.sample-wrap .container .grade{width: 50%; display: flex;align-items: center; margin-bottom: 20px;}
.sample-wrap .container .grade .grade-level{width: 60px; height: 60px; background: #ffffff; border-radius: 30px; padding-top: 5px; line-height: 100%;  margin-right: 20px;}
.sample-wrap .container .grade .grade-level p{font-size: 24px; text-align: center; color: #745537;}
.sample-wrap .container .grade .note{font-size: 18px;}

@media screen and (max-width: 480px){
img.sample{width: 60%; height: auto; object-fit: contain; margin: 30px auto; display: block;}
img.sample-paper{width: 94%; height: auto; object-fit: contain; margin: 30px auto; display: block;}

.note-sample{width: 80%; margin: 30px auto; display: block;}

.sample-wrap{width: 80%; display: block; margin: 30px auto;}
.sample-wrap .container{display: flex; flex-wrap: wrap; justify-content: space-between;}
.sample-wrap .container .grade{width: 100%; display: flex;align-items: center; margin-bottom: 20px;}
.sample-wrap .container .grade .grade-level{width: 60px; height: 60px; background: #ffffff; border-radius: 30px; padding-top: 15px; line-height: 100%;  margin-right: 20px;}
.sample-wrap .container .grade .grade-level p{font-size: 18px; text-align: center; color: #745537;}
.sample-wrap .container .grade .note{font-size: 14px;}
}
.voice-wrap{width: 100%; height: auto; padding:0; margin:0 auto 50px; display:flex; flex-wrap: wrap; justify-content: space-between;}
.voice-wrap .voice-box{width: 30%;}

.voice-wrap .voice-box h2{font-size: 20px; text-align: center; font-weight: 400; }
.voice-wrap .voice-box h2.palt{letter-spacing: -0.1em;}
.voice-wrap .voice-box img{width: 210px; height: 210px; object-fit: contain; margin:10px auto; display: block;}
.voice-wrap .voice-box p{font-size: 14px; font-weight: 400;}

@media screen and (max-width: 480px){
.voice-wrap{width: 94%; height: auto; padding:0; margin:0 auto 0px; display:flex; flex-wrap: wrap; justify-content: space-between;}
.voice-wrap .voice-box{width: 100%; margin-bottom: 50px;}
.voice-wrap .voice-box:last-child{margin-bottom: 0;}
.voice-wrap .voice-box h2{font-size: 20px; text-align: center; font-weight: 600; }
.voice-wrap .voice-box h2.palt{letter-spacing: -0.1em;}
.voice-wrap .voice-box img{width: 210px; height: 210px; object-fit: contain; margin:10px auto; display: block;}
.voice-wrap .voice-box p{font-size: 14px; font-weight: 400;}

}
.accordion {
  width: 100%;
  margin: 2em auto;
}

.accordion-item {
  border-radius: 20px;
  margin-bottom: 1em;
  overflow: hidden;
  background: #E1D6BC;;
}

.accordion-toggle {
  display: none;
}

.accordion-title {
  display: block;
  padding: 30px 30px 30px 60px;
  font-weight: bold;
  background-color: #E1D6BC;
  cursor: pointer;
  position: relative;
  font-size: 16px;
}

.accordion-title::before {
  content: "Q";
  position: absolute;
  left: 1em;
  font-size: 1.2em;
  transition: transform 0.3s;
  color:#38372F;
}

.accordion-title::after {
  content: "＋";
  position: absolute;
  right: 1em;
  font-size: 1.2em;
  transition: transform 0.3s;
  color:#38372F;
}

.accordion-toggle:checked + .accordion-title::after {
  content: "−";
  transform: rotate(180deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  padding: 0 30px;
  transition: max-height 0.4s ease, padding 0.4s ease;
}

.accordion-toggle:checked + .accordion-title + .accordion-content {
  max-height: 200px;
  padding: 30px;
}

.flow-wrap{width: 1000px; height: auto; border-radius: 10px; border:solid 1px #38372F; display: flex; padding: 20px; position: relative; margin-bottom: 30px;}
.flow-wrap .step-icon{width: 100px;}
.flow-wrap .step-icon img{width: 100%; height: auto; object-fit: contain;}
.flow-wrap .dscr{width: auto; text-align: left; margin-left: 30px;}
.flow-wrap .dscr h3{font-size: 18px; font-weight: 600; margin-bottom: 20px;text-align: left;}
.flow-wrap .dscr p{font-size: 16px; font-weight: 400;text-align: left; float: left;}

.flow-wrap .dscr p span{font-size: 14px; font-weight: 400; color: #745537;}
.flow-wrap::after{content: ""; width: 23px; height: 11px; background: url(images/arrow-down.png) no-repeat; 
  background-size:contain; display: block; position: absolute; bottom: -20px; left: 50%;}
.flow-wrap:last-child::after{display: none;}


@media screen and (max-width: 480px){
.flow-wrap{width:100%; height: auto; border-radius: 10px; border:solid 1px #38372F; 
display:inline-block; padding: 20px; position: relative; margin-bottom: 30px;}
.flow-wrap .step-icon{width: 100%;}
.flow-wrap .step-icon img{width: 100px; height: auto; object-fit: contain;display: block; margin: 0 auto;}
.flow-wrap .dscr{width: 100%; text-align: left; margin-left: 30px;display: block; margin: 0 auto;}
.flow-wrap .dscr h3{font-size: 18px; font-weight: 600; margin-bottom: 20px;text-align: center;}
.flow-wrap .dscr p{font-size: 16px; font-weight: 400;text-align: left; float: none;}

.flow-wrap .dscr p span{font-size: 14px; font-weight: 400; color: #745537;}
.flow-wrap::after{content: ""; width: 23px; height: 11px; background: url(images/arrow-down.png) no-repeat; 
  background-size:contain; display: block; position: absolute; bottom: -20px; left: 50%;}
.flow-wrap:last-child::after{display: none;}

}

.line-2-wrap{width: 1000px; background: #ffffff; border-radius: 10px; margin: 50px auto; 
  display: block; padding: 30px; text-align: center;}
.line-2-wrap .line-image{width: 184px; height: auto; margin:-60px auto 40px; display: block; }
.line-2-wrap .line-image img{width: 100%; object-fit: contain;}
.line-2-wrap .line-catch{width: 460px;margin: 20px auto 20px; display: block;}
.line-2-wrap .line-catch h3.catch{font-size: 20px; text-align: center; position: relative ; margin-bottom: 30px; }
.line-2-wrap .line-catch h3.catch::after{width: 366px; height:14px; content: "";
     background: url(images/wave-2.png) no-repeat; background-size: contain; background-position: center; 
     position: absolute; bottom: -20px; left: calc(50% - 183px); display: block;}
.line-2-wrap .line-catch p{font-size: 14px; font-weight: 400; text-align: center;}

.line-2-wrap .line-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 310px;
    height: 70px;
    margin:0 auto;
    padding: 20px 2em;
    border: none;
    border-radius: 42px;
    background-color: #59BF39;
    color: #fff;
    font-weight: 500;
    font-size: 22px;
}
.line-2-wrap .line-btn::before {
    width: 35px;
    height: 35px;
    margin-right: 20px;
    margin-top: 5px;
    background: url(images/line-icon.png) no-repeat;
    background-size: contain;
    content: '';
}

.line-2-wrap .line-btn:hover{
    background-color: #64E03E;
    transition: .6s;
}

@media screen and (max-width: 480px){
.line-2-wrap{width: 94%; background: #ffffff; border-radius: 10px; margin: 50px auto; 
  display: block; padding: 30px; text-align: center;}
.line-2-wrap .line-image{width: 184px; height: auto; margin:-60px auto 40px; display: block; }
.line-2-wrap .line-image img{width: 100%; object-fit: contain;}
.line-2-wrap .line-catch{width: 100%;margin: 20px auto 20px; display: block;}
.line-2-wrap .line-catch h3.catch{font-size: 20px; text-align: center; position: relative ; margin-bottom: 30px; }
.line-2-wrap .line-catch h3.catch::after{width: 180px; height:7px; content: "";
     background: url(images/wave-2.png) no-repeat; background-size: contain; background-position: center; 
     position: absolute; bottom: -20px; left: calc(50% - 90px); display: block;}

}
.news-wrap{width: 1000px; }
.news-wrap ul{}
.news-wrap li{width: 100%; display: flex; border-bottom: solid 1px #38372F; padding: 20px;}
.news-wrap li .date{font-size: 14px; margin-right: 20px;}
.news-wrap li .dscr a{font-size: 18px;}
.linktoNews{text-align: right;}

footer{width: 100%; background: #E1D6BC; margin: 50px auto 0; text-align: center; min-height: 100px; padding: 50px;}

@media screen and (max-width: 480px){
 .news-wrap{width: 94%; margin: auto; display: block; }
.news-wrap ul{}
.news-wrap li{width: 100%; display: flex; border-bottom: solid 1px #38372F; padding: 20px;}
.news-wrap li .date{font-size: 14px; margin-right: 20px;}
.news-wrap li .dscr a{font-size: 18px;}

footer{width: 100%; background: #E1D6BC; margin: 50px auto 0; text-align: center; min-height: 100px; padding: 50px;} 
}

.BreadCrums{border-bottom: solid 1px #38372F; padding: 10px 0; margin-bottom: 10px;}
h2.news{font-size: 20px; margin: 20px 0;}
.news-cont{margin: 20px 0;}
.news-cont p{font-size: 16px; margin-bottom: 20px;}

h3.news-list{margin: 20px 0; border-bottom: solid 1px #38372F; padding: 20px 0; text-align: left;}
h3.news-list a{font-size: 20px;}
.list-date{font-size:14px; margin-bottom: 10px; background: none;}