/*全体
--------------------------------------------------------------------------*/
body {
	margin: 0;
	padding: 0;
	COLOR: #222;
	FONT-SIZE:20px;
font-family: "Noto Serif JP", serif;
	font-weight: 400;
	LINE-HEIGHT: 150%;
	text-align: center;
	background: #fff;
}

/*paddingとborderをwidthに含める*/
* {	
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }

#con{
    width:100%;
max-width: 1920px;
	height:auto;
	margin:0 auto;
	padding:0;
	position:relative;
	text-align: center;
    background: #fff;
}

/*page-top用*/
.clearfix:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	font-size: 0;
	line-height:0;
}

img{
	border:0;
}
@media screen and (max-width:1280px){
img{
max-width: 100%;
height: auto;
width :auto;
}
}

a:link,a:visited{
	outline:0;
	color:#406ec8;
	font-weight: 500;
}

a:hover{
	outline:0;
	color: #b472e3;
}

a:hover img {
opacity: 0.8;
  -ms-filter: "alpha(opacity=80)";
}

/* カスタム改行タグ（<m-br>）によるレスポンシブ制御 */
/* デフォルト */
m-br {
display: inline;
}
/* 通常時改行 */
m-br.brall{
display: block;
}
/* 1440px以下 */
@media only screen and (max-width: 1440px) {
m-br.br1440 { display: block; }
m-br.nobr1440 { display: inline; }
}
/* 1280px以下 */
@media only screen and (max-width: 1280px) {
m-br.br1280 { display: block; }
m-br.nobr1280 { display: inline; }
}
/* 1080px以下 */
@media only screen and (max-width: 1080px) {
m-br.br1080 { display: block; }
m-br.nobr1080 { display: inline; }
}
/* 835px以下 */
@media only screen and (max-width: 835px) {
m-br.br835 { display: block; }
m-br.nobr835 { display: inline; }
}
/* 640px以下 */
@media only screen and (max-width: 640px) {
m-br.br640 { display: block; }
m-br.nobr640 { display: inline; }
}
/* 480px以下 */
@media only screen and (max-width: 480px) {
m-br.br480 { display: block; }
m-br.nobr480 { display: inline; }
}
/* 414px以下 */
@media only screen and (max-width: 414px) {
m-br.br414 { display: block; }
m-br.nobr414 { display: inline; }
}

/*ヘッダ
--------------------------------------------------------------------------*/
header{
width: 100%;
height: auto;
margin: 0;
padding: 20px 2% 20px;
text-align: left;
display: flex;
background: #fff;
position: relative;
align-items: center;
}
@media only screen and (max-width: 835px) {
header{
padding:10px 2% 10px;
}
}

#logo{
width: 35%;
margin: 0;
padding: 0;
display: flex;
}
#logo img{
max-width:200px;
position: absolute;
top:10px;
left: 3%;
}
@media only screen and (max-width: 1600px) {
#logo img{
max-width:170px;
}
}
@media only screen and (max-width: 1440px) {
#logo img{
max-width:150px;
}
}
@media only screen and (max-width: 1280px) {
#logo{
width: 100%;
}
}
@media only screen and (max-width: 835px) {
#logo img{
max-width:120px;
top:2px;
left: 1%;
}
}
@media only screen and (max-width: 640px) {
#logo img{
max-width:100px;
}
}

#title{
padding: 0 0 0 220px;
}
#logo h1{
width: 100%;
height: auto;
margin: 0 0 10px;
padding: 0;
text-align: left;
font-size:35px;
line-height: 100%;
font-weight: 500;
}
#logo h1 a{
text-decoration: none;
color: #222;
}
#logo p{
text-align: left;
line-height: 120%;
color: #5484d3;
margin: 0;
font-size: 20px;
}
@media only screen and (max-width: 1600px) {
#title{
padding: 0 0 0 200px;
}
#logo h1{
font-size:30px;
}
#logo p{
font-size: 16px;
}
}
@media only screen and (max-width: 1440px) {
#title{
padding: 0 0 0 170px;
}
}
@media only screen and (max-width: 835px) {
#title{
padding: 0 0 0 120px;
}
}
@media only screen and (max-width: 640px) {
#title{
padding: 0 0 0 100px;
}
#logo h1{
font-size:25px;
}
}
@media only screen and (max-width: 480px) {
#title{
padding: 0 0 0 100px;
}
}
@media only screen and (max-width: 414px) {
#logo h1{
font-size:22px;
}
#logo p{
font-size: 15px;
line-height: 110%;
}
}

#menu-box{
width:65%;
height: auto;
margin: 0;
padding: 0;
}
menu{
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
menu ul{
width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
menu li{
flex: 1;
  margin: 0;
  padding: 10px 0;
  list-style-type: none;
  border-right: 2px solid #c4d5f1;
  text-align: center;
}
menu li:nth-last-child(2),menu li:last-of-type{
border-right:none;
}
menu li a:link,menu li a:visited{
display: block;
  text-decoration: none;
  color: #222;
  width: 100%;
  text-align: center;
  line-height: 100%;
  font-size: 17px;
}
menu li a:hover{
text-decoration: underline;
}
@media only screen and (max-width: 1600px) {
menu li a:link,menu li a:visited{
  font-size: 16px;
}
}

#menu-bu{
background: #f7e367;
border-radius: 10px;
flex: 0 0 auto;
min-width: 130px;
}
menu li#menu-bu{
padding: 0;
}
menu li#menu-bu a{
display: flex;
  align-items: center;
  justify-content: center;
  padding:14px 45px;
  border-radius: 10px;
}
menu li#menu-bu a:hover{
background: #d2c1de;
}
#menu-bu img{
max-width: 25px;
margin: 0 10px 0 0;
vertical-align: middle;
}

@media only screen and (max-width: 1280px) {
#menu-box{
width:60%;
height: auto;
margin: 0;
padding: 0;
position: fixed;
top:0;
left:0;
z-index: 9998;
}
menu{
clear: both;
width: 30%;
height: auto;
height: 100vh;
margin: 0 0 0 70%;
padding: 0;
text-align: center;
position: fixed;
top: 0;
background: rgba(219,232,251,1.0);
box-shadow: -5px 0 25px #685856;
}
@media only screen and (max-width: 1080px) {
menu{
width: 40%;
margin: 0 0 0 60%;
z-index: 9998;
}
}
@media only screen and (max-width: 835px) {
menu{
width: 50%;
margin: 0 0 0 50%;
}
}
@media only screen and (max-width: 640px) {
menu{
width: 60%;
margin: 0 0 0 40%;
}
}
@media only screen and (max-width: 480px) {
menu{
width: 70%;
margin: 0 0 0 30%;
}
}
@media only screen and (max-width: 414px) {
menu{
width: 80%;
margin: 0 0 0 20%;
}
}

menu ul{
display:inherit;
clear: both;
float: left;
width: 100%;
height: auto;
margin: -15px 0 0;
padding: 0;
text-align: center;
flex-direction: column;
}
menu li{
display: block;
border-top:1px solid #79a4ea;
padding: 25px 0 10px;
margin: 15px 0 0;
}
menu li a:link,menu li a:visited{
display: block;
text-decoration: none;
padding:0;
text-align: center;
line-height: 100%;
font-size: 17px;
}
menu li a:hover{
text-decoration: underline;
}
#menu-bu{
border-radius: 0;
}
menu li#menu-bu a{
  border-radius:0;
}

/*==================================================
　5-2-4 MENUがCLOSEに
===================================*/

/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn4{
float: right;
  position: fixed;/*ボタン内側の基点となるためrelativeを指定*/
  background:#79a4ea;
  cursor: pointer;
    width: 50px;
    height:50px;
  border-radius: 5px;
  top:10px;
  right:10px;
  z-index: 9999;
  border: 2px solid #fff;
}
/*ボタン内側*/
.openbtn4 span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 13px;
    height: 2px;
    border-radius: 5px;
  background: #fff;
    width: 45%;
  }
.openbtn4 span:nth-of-type(1) {
  top:11px; 
}
.openbtn4 span:nth-of-type(2) {
  top:17px;
}
.openbtn4 span:nth-of-type(3) {
  top:23px;
}
.openbtn4 span:nth-of-type(3)::after {
  content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/
  position: absolute;
  top:0px;
  left:-5px;
  color: #fff;
  font-size: 0.7rem;
  text-transform: uppercase;
  font-family: "メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
}
@media only screen and (max-width: 640px) {
.openbtn4 span:nth-of-type(3)::after {
  content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/
  position: absolute;
  top:0px;
  left:-5px;
  color: #fff;
  font-size: 0.7rem;
  text-transform: uppercase;
  font-family: "メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
}
}

/*activeクラスが付与されると線が回転して×になり、Menu⇒Closeに変更*/
.openbtn4.active span:nth-of-type(1) {
    top: 12px;
    left: 16px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}
.openbtn4.active span:nth-of-type(2) {
  opacity: 0;
}
.openbtn4.active span:nth-of-type(3){
    top: 24px;
    left: 16px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}

.openbtn4.active span:nth-of-type(3)::after {
  content:"Close";/*3つ目の要素のafterにClose表示を指定*/
    transform: translateY(0) rotate(-45deg);
  top:-1px;
  left:-0px;
  font-size: 0.8rem;
  font-family: "メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
}
/*.doneクラスがついたヘッダー*/
.dnone {
display: none;
}
/*メニューボタンをクリックした際に付与されるpanelactiveクラスがついたら*/
.dnone.panelactive {
display: inherit;
}
}

/*メイン
--------------------------------------------------------------------------*/
#kv{
width: 95%;
height: auto;
margin: 0 5% 0 0;
padding: 130px 35% 80px 3%;
background: url(image/kv.webp) no-repeat right top/contain,linear-gradient(to right, #79a4ea 50%, transparent 50%);
text-align: left;
}
@media only screen and (max-width: 1440px) {
#kv{
padding: 100px 35% 70px 3%;
}
}
@media only screen and (max-width: 1280px) {
#kv{
width: 98%;
margin: 0 2% 0 0;
padding: 90px 25% 60px 3%;
background: url(image/kv.webp) no-repeat right top/contain,linear-gradient(to right, #79a4ea 50%, transparent 50%);
}
}
@media only screen and (max-width: 1080px) {
#kv{
padding: 45% 5% 30px 3%;
background: url(image/kv-sp.webp) no-repeat right top/contain,linear-gradient(to top, #79a4ea 50%, transparent 50%);
border-radius: 0 500px 500px 0;
}
}
@media only screen and (max-width: 835px) {
#kv{
padding: 40% 20% 30px 3%;
background: url(image/kv-sp.webp) no-repeat right top/contain,linear-gradient(to top, #79a4ea 70%, transparent 70%);
}
}
@media only screen and (max-width: 480px) {
#kv{
padding: 40% 18% 30px 3%;
}
}
@media only screen and (max-width: 414px) {
#kv{
width: 100%;
margin:0;
background: url(image/kv-sp.webp) no-repeat right top/contain,linear-gradient(to top, #79a4ea 80%, transparent 80%);
border-radius: 0 200px 200px 0;
padding: 40% 5% 30px 3%;
}
}

#kv span{
font-size: 20px;
line-height: 150%;
background: #fff;
border-radius: 50px;
text-align: center;
color: #5484d3;
padding: 0 20px;
}
#kv h1{
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: left;
line-height: 180%;
color: #fff;
font-size: 55px;
font-weight: 800;
}
#kv h1 strong{
font-size: 40px;
font-weight: 600;
line-height: 120%;
}
#kv h1 em{
font-size: 30px;
font-style: normal;
line-height: 120%;
}
#kv p{
text-align: left;
font-size: 22px;
line-height: 180%;
margin: 0 0 50px;
color: #fff;
}
@media only screen and (max-width: 1600px) {
#kv h1{
font-size: 50px;
}
#kv h1 strong{
font-size: 35px;
}
#kv h1 em{
font-size: 25px;
}
#kv p{
font-size: 20px;
}
}
@media only screen and (max-width: 1440px) {
#kv span{
font-size: 16px;
}
#kv h1{
font-size: 45px;
}
#kv h1 strong{
font-size: 30px;
}
#kv h1 em{
font-size: 20px;
}
#kv p{
font-size: 17px;
}
}
@media only screen and (max-width: 1280px) {
#kv h1{
margin: 10px 0 20px;
line-height: 120%;
text-shadow: 2px 2px 2px #79a4ea;
}
#kv h1 strong{
margin: 15px 0 0;
}
#kv p{
margin: 0 0 30px;
}
}
@media only screen and (max-width: 640px) {
#kv span{
font-size: 14px;
}
#kv h1{
font-size: 40px;
}
#kv h1 strong{
font-size: 25px;
}
#kv h1 em{
font-size: 16px;
}
#kv p{
font-size: 16px;
text-align: justify;
font-weight: 500;
}
}
@media only screen and (max-width: 480px) {
#kv h1{
font-size: 35px;
}
}
@media only screen and (max-width: 414px) {
#kv h1{
font-size: 30px;
}
#kv h1 strong{
font-size: 22px;
}
#kv p{
line-height: 150%;
}
}

#kv-bu{
width: 35%;
margin:0;
padding: 0;
}
#kv-bu a{
display: flex;
width: 100%;
margin:0;
padding: 15px 5%;
gap: 10px;
background: #f7e367;
border-radius: 10px;
justify-content:center;
align-items: center;
border: 2px solid #fff;
color: #222;
text-decoration: none;
}
#kv-bu a:hover{
background: #d2c1de;
}
#kv-bu img{
max-width: 25px;
}
@media only screen and (max-width: 1280px) {
#kv-bu{
width: 45%;
}
}
@media only screen and (max-width: 835px) {
#kv-bu{
width: 60%;
}
}
@media only screen and (max-width: 640px) {
#kv-bu a{
padding: 10px 5%;
border-radius: 10px;
font-size: 17px;
}
}
@media only screen and (max-width: 414px) {
#kv-bu{
width: 70%;
}
}

#top-main{
width: 100%;
height: auto;
margin:80px 0;
padding: 0;
background: linear-gradient(to bottom,transparent 0%,transparent 25%,#f2f7fe 25%,#f2f7fe 75%,transparent 75%,transparent 100%);
}

#about{
width: 100%;
height:auto;
margin: 0 0 80px;
padding: 80px 55% 80px 10%;
background:url(image/about.webp) no-repeat 90% center/35%,linear-gradient(to right,transparent 50%,#c9ddfd 50%);
text-align: left;
}
@media only screen and (max-width: 1600px) {
#about{
padding: 70px 55% 70px 5%;
}
}
@media only screen and (max-width: 1280px) {
#about{
padding: 50px 55% 50px 5%;
background:url(image/about.webp) no-repeat 90% center/40%,linear-gradient(to right,transparent 50%,#c9ddfd 50%);
}
}
@media only screen and (max-width: 1080px) {
#about{
padding: 20px 55% 20px 5%;
background:url(image/about.webp) no-repeat 90% center/40%,linear-gradient(to right,transparent 50%,#c9ddfd 50%);
}
}
@media only screen and (max-width: 835px) {
#about{
padding: 0 5% 55% 5%;
background:url(image/about.webp) no-repeat center 90%/55% auto,linear-gradient(to bottom,transparent 50%,#c9ddfd 50%);
}
}
@media only screen and (max-width: 640px) {
#about{
padding: 0 5% 75% 5%;
background:url(image/about.webp) no-repeat center 95%/75% auto,linear-gradient(to bottom,transparent 50%,#c9ddfd 50%);
}
}

#about h2{
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 0;
text-align: left;
line-height: 130%;
font-size: 45px;
font-weight: 600;
}
#about h2 span{
font-size: 25px;
color: #5484d3;
font-weight: 500;
}
#about h2 strong{
font-size: 55px;
line-height: 150%;
font-weight: 600;
}
#about h3{
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: left;
font-size: 30px;
font-weight: 500;
line-height: 150%;
}
#about p{
text-align: justify;
line-height: 180%;
margin: 0 0 40px;
font-size: 20px;
}
@media only screen and (max-width: 1280px) {
#about h2{
margin: 0 0 30px;
font-size: 40px;
}
#about h2 span{
font-size: 20px;
}
#about p{
font-size: 18px;
margin: 0 0 30px;
}
}
@media only screen and (max-width: 835px) {
#about h2{
line-height: 110%;
}
#about h2 strong{
line-height: 120%;
}
#about h3{
margin: 0 0 20px;
}
}
@media only screen and (max-width: 640px) {
#about h2{
margin: 0 0 25px;
font-size: 35px;
}
#about h3{
font-size:25px;
}
#about p{
font-size: 17px;
}
}
@media only screen and (max-width: 480px) {
#about h2{
font-size: 30px;
}
#about h2 strong{
font-size: 50px;
}
#about h3{
text-align: justify;
font-size:22px;
font-weight: 600;
}
#about p{
font-size: 16px;
}
}

#about-bu{
width: 40%;
margin:0;
padding: 0;
}
#about-bu a{
display: flex;
width: 100%;
margin:0;
padding: 15px 5%;
gap: 10px;
background: #fff;
border-radius: 10px;
justify-content:center;
align-items: center;
border: 1px solid #5484d3;
color: #222;
text-decoration: none;
box-shadow: 3px 3px 2px #c9ddfd;
}
#about-bu a:hover{
background: #feed83;
}
#about-bu img{
max-width: 25px;
}
@media only screen and (max-width: 1440px) {
#about-bu{
width: 60%;
}
}
@media only screen and (max-width: 1080px) {
#about-bu{
width: 80%;
font-size: 18px;
}
}
@media only screen and (max-width: 835px) {
#about-bu{
width: 60%;
font-size: 17px;
}
}
@media only screen and (max-width: 640px) {
#about-bu{
width: 70%;
font-size: 17px;
}
}
@media only screen and (max-width: 480px) {
#about-bu{
width: 80%;
font-size: 16px;
}
}
@media only screen and (max-width: 414px) {
#about-bu{
width: 90%;
}
}

#fea{
width: 100%;
height:auto;
margin: 0;
padding: 80px 25% 80px 35%;
background:url(image/fea.webp) no-repeat 5% center/30%,linear-gradient(to right, #c9ddfd 80%, transparent 20%);
text-align: left;
}
@media only screen and (max-width: 1600px) {
#fea{
padding: 80px 15% 80px 35%;
background:url(image/fea.webp) no-repeat 5% center/30%,linear-gradient(to right, #c9ddfd 90%, transparent 10%);
}
}
@media only screen and (max-width: 1440px) {
#fea{
padding: 70px 10% 70px 30%;
background:url(image/fea.webp) no-repeat 5% center/25%,linear-gradient(to right, #c9ddfd 95%, transparent 5%);
}
}
@media only screen and (max-width: 1280px) {
#fea{
padding: 60px 10% 60px 35%;
background:url(image/fea.webp) no-repeat 5% center/30%,linear-gradient(to right, #c9ddfd 95%, transparent 5%);
}
}
@media only screen and (max-width: 835px) {
#fea{
padding: 60px 10% 40% 5%;
background:url(image/fea-sp.webp) no-repeat center 97%/auto 30%,linear-gradient(to right, #c9ddfd 95%, transparent 5%);
}
}
@media only screen and (max-width: 640px) {
#fea{
padding: 40px 10% 40% 5%;
background:url(image/fea-sp.webp) no-repeat center 97%/80% auto,linear-gradient(to right, #c9ddfd 95%, transparent 5%);
}
}

#fea h2{
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 0;
text-align: left;
line-height: 100%;
font-size: 45px;
font-weight: 600;
color: #fff;
}
#fea h2 span{
font-size: 25px;
color: #5484d3;
font-weight: 500;
}
#fea h2 strong{
font-size: 55px;
line-height: 150%;
font-weight: 600;
}
@media only screen and (max-width: 1280px) {
#fea h2{
margin: 0 0 30px;
font-size: 40px;
}
#fea h2 strong{
font-size: 50px;
}
}
@media only screen and (max-width: 640px) {
#fea h2{
margin: 0 0 20px;
font-size: 35px;
}
#fea h2 strong{
font-size: 40px;
}
}
@media only screen and (max-width: 480px) {
#fea h2{
font-size: 30px;
}
#fea h2 strong{
font-size: 35px;
}
}

#fea-area{
width: 100%;
height: auto;
margin: 0;
padding: 0;
flex-direction: column;
}
.fea-box{
background: #fff;
border-radius: 10px;
margin: 0 0 30px;
padding: 20px 30px;
text-align: left;
display: grid;
grid-template-columns: 90px 1fr; 
align-items: start;
}
@media only screen and (max-width: 1280px) {
.fea-box{
padding: 20px 15px;
grid-template-columns: 5px 1fr; 
}
}
@media only screen and (max-width: 640px) {
.fea-box{
margin: 0 0 20px;
}
}

#fea h3{
grid-column: 1 / 3;
  margin: 0 0 20px 0;
  padding: 0;
  line-height: 120%;
  font-size: 35px;
  color: #5484d3;
  font-weight: 500;
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
}
#fea h3 span{
font-size: 55px;
  margin: 0;
  grid-row: span 2;
}
#fea p{
grid-column: 2;
  text-align: justify;
  line-height: 180%;
  margin: 0;
  font-size: 20px;
}
@media only screen and (max-width: 1600px) {
#fea h3{
  font-size: 30px;
}
}
@media only screen and (max-width: 1440px) {
#fea h3 span{
font-size: 50px;
}
#fea p{
  font-size: 19px;
}
}
@media only screen and (max-width: 1280px) {
#fea h3{
  margin: 0 0 20px 0;
  grid-template-columns: 60px 1fr;
  font-size: 25px;
  font-weight: 600;
}
#fea h3 span{
font-size: 40px;
}
#fea p{
  font-size: 18px;
}
}
@media only screen and (max-width: 640px) {
#fea h3{
  font-size: 22px;
}
#fea h3 span{
font-size: 35px;
}
#fea p{
  font-size: 16px;
}
}
@media only screen and (max-width: 480px) {
#fea h3{
  margin: 0 0 10px 0;
  grid-template-columns: 50px 1fr;
}
#fea h3 span{
font-size: 30px;
}
}

#fea-bu{
width: 40%;
margin:0;
padding: 0;
}
#fea-bu a{
display: flex;
width: 100%;
margin:0;
padding: 15px 5%;
gap: 10px;
background: #fff;
border-radius: 10px;
justify-content:center;
align-items: center;
border: 1px solid #5484d3;
color: #222;
text-decoration: none;
box-shadow: 3px 3px 2px #c9ddfd;
}
#fea-bu a:hover{
background: #feed83;
}
#fea-bu img{
max-width: 25px;
}
@media only screen and (max-width: 1440px) {
#fea-bu{
width: 45%;
}
}
@media only screen and (max-width: 1280px) {
#fea-bu{
width: 60%;
font-size: 18px;
}
}
@media only screen and (max-width: 480px) {
#fea-bu{
width: 70%;
font-size: 17px;
}
}

#uti{
width: 60%;
height: auto;
margin: 100px 20%;
padding: 50px 7%;
background: url(image/uti.png) no-repeat center top/100% 100%;
}
#uti h4{
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: center;
line-height: 120%;
font-size: 35px;
color: #5484d3;
font-weight: 600;
}
#uti p{
text-align: center;
line-height: 180%;
margin: 0;
font-size: 20px;
}
@media only screen and (max-width: 1600px) {
#uti{
width: 70%;
margin: 100px 15%;
}
}
@media only screen and (max-width: 1440px) {
#uti{
width: 80%;
margin: 90px 10%;
}
}
@media only screen and (max-width: 1080px) {
#uti{
width: 90%;
margin: 80px 5%;
}
#uti h4{
margin: 0 0 25px;
font-size: 30px;
}
#uti p{
font-size:18px;
}
}
@media only screen and (max-width: 835px) {
#uti p{
font-size:17px;
}
}
@media only screen and (max-width: 640px) {
#uti{
padding: 30px 7%;
margin: 40px 5%;
}
#uti h4{
margin: 0 0 20px;
font-size: 25px;
}
#uti p{
font-size:16px;
}
}

#map{
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
#map iframe{
width: 100%;
height: 400px;
}
@media only screen and (max-width: 640px) {
#map iframe{
height: 350px;
}
}
@media only screen and (max-width: 480px) {
#map iframe{
height: 300px;
}
}

#cta{
width: 100%;
height: auto;
margin: 0;
padding: 80px 20%;
background: #f2f7fe;
border-top:1px solid #9fc2fb;
}
#cta img.logo{
width: 15%;
margin: -150px 0 0;
}
@media only screen and (max-width: 1600px) {
#cta img.logo{
width:20%;
margin: -150px 0 0;
}
}
@media only screen and (max-width: 1440px) {
#cta{
padding: 70px 15%;
}
}
@media only screen and (max-width: 1080px) {
#cta{
padding: 70px 10%;
}
}
@media only screen and (max-width: 835px) {
#cta{
padding: 50px 5% 70px;
}
#cta img.logo{
width:25%;
margin: -110px 0 0;
}
}
@media only screen and (max-width: 640px) {
#cta{
padding: 50px 5% 40px;
}
#cta img.logo{
width:30%;
}
}
@media only screen and (max-width: 480px) {
#cta img.logo{
width:40%;
}
}

#cta h5{
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 25px 0 15px;
text-align: center;
line-height: 130%;
font-size: 40px;
font-weight: 600;
background: url(image/cta-l.png) no-repeat left top/10%,url(image/cta-r.png) no-repeat right top/10%;
}
#cta h5 span{
font-size: 25px;
color: #5484d3;
font-weight: 500;
}
@media only screen and (max-width: 1280px) {
#cta h5{
margin: 0 0 40px;
font-size: 35px;
}
#cta h5 span{
font-size: 20px;
}
}
@media only screen and (max-width: 835px) {
#cta h5{
margin: 0 0 10px;
padding: 5px 0 15px;
font-size: 30px;
}
}
@media only screen and (max-width: 640px) {
#cta h5{
font-size: 25px;
background: url(image/cta-l.png) no-repeat left top/15%,url(image/cta-r.png) no-repeat right top/15%;
}
#cta h5 span{
font-size: 16px;
}
}

#cta-area{
width: 100%;
height: auto;
margin: 0;
padding: 0;
display: flex;
justify-content:space-between;
}
.cta-box{
width: 30%;
}
@media only screen and (max-width: 835px) {
.cta-box{
width: 32%;
}
}
@media only screen and (max-width: 640px) {
#cta-area{
flex-direction: column;
gap: 20px;
align-items: center;
}
.cta-box{
width: 70%;
}
}
@media only screen and (max-width: 480px) {
.cta-box{
width: 80%;
}
}
@media only screen and (max-width: 414px) {
.cta-box{
width: 90%;
}
}

.cta-box a{
display: flex;
width: 100%;
height: 70px;
margin:0;
padding: 0 5%;
gap: 10px;
background: #f7e367;
border-radius: 10px;
justify-content:center;
align-items: center;
border: 2px solid #fff;
color: #222;
text-decoration: none;
box-shadow: 3px 3px 2px #c9ddfd;
}
.cta-box a.bu-line{
background: #06c755;
color: #fff;
}
.cta-box a.bu-insta{
background: #9bbffa;
color: #fff;
}
.cta-box a:hover{
background: #d1e1f7;
}
.cta-box a.bu-line:hover{
background: #06c755;
color: #f8dd34;
}
.cta-box a.bu-insta:hover{
background: #7aa6ef;
}
.cta-box img{
max-width: 25px;
}
.cta-box a.bu-line img{
max-width: 40px;
}
.cta-box a.bu-insta img{
max-width: 35px;
}
@media only screen and (max-width: 835px) {
.cta-box a{
font-size: 17px;
}
}

#kv-sub{
width: 95%;
height: auto;
margin: 0 5% 0 0;
padding: 110px 3% 60px 3%;
background: url(image/kv-sub.webp) no-repeat right top/contain,linear-gradient(to right, #79a4ea 90%, transparent 10%);
text-align: left;
border-radius: 0 300px 300px 0;
}
@media only screen and (max-width: 1440px) {
#kv-sub{
padding: 100px 3% 70px 3%;
}
}
@media only screen and (max-width: 1280px) {
#kv-sub{
width: 98%;
margin: 0 2% 0 0;
padding: 90px 3% 60px 3%;
background: url(image/kv-sub.webp) no-repeat right top/contain,linear-gradient(to right, #79a4ea 90%, transparent 10%);
}
}
@media only screen and (max-width: 1080px) {
#kv-sub{
padding: 80px 3% 50px 3%;
background: url(image/kv-sub-sp.webp) no-repeat right top/contain,linear-gradient(to right, #79a4ea 90%, transparent 10%);
}
}
@media only screen and (max-width: 835px) {
#kv-sub{
padding: 70px 3% 40px 3%;
}
}
@media only screen and (max-width: 640px) {
#kv-sub{
padding: 60px 3% 30px 3%;
}
}
@media only screen and (max-width: 480px) {
#kv-sub{
padding: 40px 3% 25px 3%;
background: url(image/kv-sub-sp2.webp) no-repeat right top/contain,linear-gradient(to right, #79a4ea 90%, transparent 10%);
}
}
@media only screen and (max-width: 414px) {
#kv-sub{
padding: 35px 3% 20px 3%;
}
}

#kv-sub h1{
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align:center;
line-height: 120%;
color: #fff;
font-size: 45px;
font-weight: 800;
}
@media only screen and (max-width: 1600px) {
#kv-sub h1{
font-size: 50px;
}
}
@media only screen and (max-width: 1440px) {
#kv-sub h1{
font-size: 45px;
}
}
@media only screen and (max-width: 1280px) {
#kv-sub h1{
margin: 10px 0 20px;
line-height: 120%;
text-shadow: 2px 2px 2px #79a4ea;
}
}
@media only screen and (max-width: 1080px) {
#kv-sub h1{
text-align: left;
}
}
@media only screen and (max-width: 835px) {
#kv-sub h1{
font-size: 40px;
}
}
@media only screen and (max-width: 640px) {
#kv-sub h1{
font-size: 35px;
}
}
@media only screen and (max-width: 480px) {
#kv-sub h1{
font-size: 30px;
}
}
@media only screen and (max-width: 414px) {
#kv-sub h1{
font-size: 27px;
}
}

main{
width: 100%;
height: auto;
margin: 0;
padding: 60px 20% 200px;
}
@media only screen and (max-width: 1600px) {
main{
padding: 60px 15% 150px;
}
}
@media only screen and (max-width: 1440px) {
main{
padding: 60px 10% 120px;
}
}
@media only screen and (max-width: 1280px) {
main{
padding: 60px 5% 100px;
}
@media only screen and (max-width: 480px) {
main{
padding: 60px 5% 60px;
}
}

}
main p{
text-align: left;
font-size: 20px;
line-height: 180%;
margin: 0 0 40px;
}
@media only screen and (max-width: 1080px) {
main p{
font-size: 19px;
}
}
@media only screen and (max-width: 835px) {
main p{
font-size: 18px;
}
}
@media only screen and (max-width: 640px) {
main p{
font-size: 17px;
margin: 0 0 35px;
text-align: justify;
word-break: break-all;
}
}
@media only screen and (max-width: 480px) {
main p{
font-size: 16px;
margin: 0 0 30px;
line-height: 160%;
}
}

main h2{
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 0 0 5px 40px;
text-align: left;
font-size: 35px;
font-weight: 600;
line-height: 120%;
border-bottom:1px solid #79a4ea;
background: url(image/h2-sub.png) no-repeat left center;
}
main h3,main h4{
width: 100%;
height: auto;
margin: 100px 0 40px;
padding: 10px 2%;
text-align: left;
line-height: 120%;
font-size: 30px;
font-weight: 600;
background: #c9ddfd;
border-radius: 7px;
color: #5484d3;
}
@media only screen and (max-width: 640px) {
main h2{
margin: 0 0 30px;
font-size: 30px;
background: url(image/h2-sub.png) no-repeat left center/25px;
}
main h3{
margin: 80px 0 30px;
font-size: 25px;
}
}
@media only screen and (max-width: 480px) {
main h2{
font-size: 25px;
margin: 0 0 20px;
padding: 0 0 5px 35px;
}
main h3,main h4{
margin: 90px 0 20px;
font-size: 20px;
}
}
@media only screen and (max-width: 414px) {
main h2{
font-size: 22px;
}
main h3,main h4{
margin: 80px 0 20px;
font-size: 18px;
font-weight: 800;
}
}

#salon-pict{
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
display: flex;
justify-content:space-between;
align-items: center;
}
/* ★ #salon-pict 内のラッパーに幅を指定する */
#salon-pict .video-wrap,
#salon-pict .img-wrap {
width: 18%;
}

@media only screen and (max-width: 640px) {
#salon-pict{
flex-wrap: wrap;
margin: 0;
justify-content:flex-start;
}
/* 640px以下の時は #salon-pict 内のラッパーを31%にする */
#salon-pict .video-wrap,
#salon-pict .img-wrap {
width:31%;
margin: 0 2% 20px 0;
}
}

#salon-pict2{
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
display: flex;
justify-content:space-between;
align-items: center;
}
/* ★ #salon-pict2 内のラッパーに幅を指定する */
#salon-pict2 .img-wrap {
width:31%;
}
@media only screen and (max-width: 640px) {
#salon-pict2{
flex-wrap: wrap;
margin: 0 0 0;
}
#salon-pict2 .img-wrap {
width:48%;
margin: 0 0 20px
}
}

/* ラッパーの中身（動画・画像）は箱の幅いっぱいにする */
.video-wrap video,
.img-wrap img {
width: 100%;
height: auto;
display: block;
}

/* モーダル全体の背景 */
.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
}

/* モーダル内のコンテンツ（画像・動画） */
.modal-content-wrap img,
.modal-content-wrap video {
  max-width: 90%;
  max-height: 90vh;
  object-fit: contain;
  display: block;
  margin: auto;
  border-radius: 5px;
}

/* 動画の場合はコントロールを表示させる */
.modal-content-wrap video {
  outline: none;
}

/* 閉じるボタン */
.close-modal {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}
.close-modal:hover {
  color: #ccc;
}

/* 動画のカバー設定 */
#salon-pict .video-wrap {
  position: relative;
  display: inline-block;
}

.video-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 2;
}

/* #salon-pict と #salon-pict2 の中の img を囲むラッパー（JSで自動生成します） */
.img-wrap {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* ホバー時に表示する虫眼鏡アイコン（CSSだけで描く虫眼鏡の例） */
.img-wrap::after {
  content: "";
  position: absolute;
  top: 20px;
right: 5px;
left: auto;
transform: translateY(-50%) scale(0.8);
  width: 40px;
  height: 40px;
  background-color: rgba(84, 132, 211, 0.6);
  border-radius: 50%;
  /* 虫眼鏡のアイコンをCSSで表現する場合の簡易的なデザイン（中央に白丸と持ち手） */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>');
  background-repeat: no-repeat;
  background-position: center;
  opacity:1;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none; /* アイコン自体がクリックを邪魔しないようにする */
}

/* マウスホバーしたときにアイコンをフワッと表示する */
.img-wrap:hover::after {
  opacity: 1;
transform: translateY(-50%) scale(1);
}

/* 画像自体のレイアウトが崩れないよう、ラッパー内のimgの幅を100%にする */
.img-wrap img {
  width: 100% !important;
  height: auto !important;
  display: block;
}

#salon-pict3{
width: 100%;
height: auto;
margin: 0 0 60px;
padding: 0;
display: flex;
justify-content:flex-start;
align-items: center;
}
#salon-pict3 img{
width: 30%;
height: auto;
}
@media only screen and (max-width: 640px) {
#salon-pict3 img{
width: 48%;
}
}

#price-pict{
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
display: flex;
justify-content:space-between;
align-items: center;
flex-wrap: wrap;
}
#price-pict .img-wrap {
width:31%;
margin: 0 0 20px;
}
@media only screen and (max-width: 640px) {
#price-pict{
flex-wrap: wrap;
margin: 0 0 0;
}
#price-pict .img-wrap {
width:48%;
margin: 0 0 20px
}
}

#prof-info{
width: 100%;
height: auto;
margin: 0 0 60px;
padding: 70px 5% 20px;
background: url(image/prof-info5.png) no-repeat right top/10%,url(image/prof-info4.png) no-repeat left top/10%,url(image/prof-info3.png) no-repeat left bottom/10%,url(image/prof-info2.png) no-repeat right bottom/10%,url(image/prof-info1.png) no-repeat center top/15%;
}
@media only screen and (max-width: 835px) {
#prof-info{
margin: 0 0 50px;
background: url(image/prof-info5.png) no-repeat right top/10%,url(image/prof-info4.png) no-repeat left top/10%,url(image/prof-info3.png) no-repeat left bottom/10%,url(image/prof-info2.png) no-repeat right bottom/10%,url(image/prof-info1.png) no-repeat center top/20%;
}
}
@media only screen and (max-width: 640px) {
#prof-info{
padding: 60px 5% 10px;
background: url(image/prof-info5.png) no-repeat right top/15%,url(image/prof-info4.png) no-repeat left top/15%,url(image/prof-info3.png) no-repeat left bottom/15%,url(image/prof-info2.png) no-repeat right bottom/15%,url(image/prof-info1.png) no-repeat center top/25%;
}
}
@media only screen and (max-width: 480px) {
#prof-info{
padding: 50px 5% 10px;
background: url(image/prof-info5.png) no-repeat right top/15%,url(image/prof-info4.png) no-repeat left top/15%,url(image/prof-info3.png) no-repeat left bottom/15%,url(image/prof-info2.png) no-repeat right bottom/15%,url(image/prof-info1.png) no-repeat center top/25%;
}
}
@media only screen and (max-width: 414px) {
#prof-info{
padding: 50px 5% 10px;
background: url(image/prof-info5.png) no-repeat right top/20%,url(image/prof-info4.png) no-repeat left top/20%,url(image/prof-info3.png) no-repeat left bottom/20%,url(image/prof-info2.png) no-repeat right bottom/20%,url(image/prof-info1.png) no-repeat center top/30%;
}
}

main #prof-info h2{
border-bottom:none;
background: none;
text-align: center;
padding: 0;
margin: 0 0 20px;
}
main #prof-info h3{
padding: 0;
margin: 0 0 30px;
text-align: center;
background: none;
background: url(image/h2-sub.png) no-repeat left center/25px,url(image/h2-sub.png) no-repeat right center/25px;
}
@media only screen and (max-width: 1080px) {
main #prof-info h2{
font-size: 30px;
}
main #prof-info h3{
font-size:25px;
}
}
@media only screen and (max-width: 640px) {
main #prof-info h3{
margin: 0 0 5px;
}
}
@media only screen and (max-width: 414px) {
main #prof-info h2{
font-size: 25px;
}
main #prof-info h3{
font-size:20px;
}
}

#prof-info img{
max-width: 60%;
}
@media only screen and (max-width: 835px) {
#prof-info img{
max-width: 70%;
}
}
@media only screen and (max-width: 640px) {
#prof-info img{
max-width: 80%;
}
}
@media only screen and (max-width: 480px) {
#prof-info img{
max-width: 90%;
}
}

#prof-text{
}
#prof-text h4{
width: 100%;
height: auto;
margin: 80px 0 30px;
padding: 0 0 5px;
text-align: left;
font-size: 25px;
font-weight: 700;
line-height: 120%;
border-bottom: 1px dashed #222;
}
@media only screen and (max-width: 640px) {
#prof-text h4{
margin: 60px 0 20px;
font-size: 22px;
}
}
@media only screen and (max-width: 480px) {
#prof-text h4{
margin: 50px 0 20px;
font-size: 20px;
}
}

#price{
width: 100%;
height: auto;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content:space-between;
align-items: flex-start;
}
.price-box{
width: 47%;
margin: 0 0 50px;
align-self:stretch;
background: linear-gradient(#fff,#f2f7fe);
}
@media only screen and (max-width: 835px) {
#price{
flex-direction: column;
}
.price-box{
width: 100%;
margin: 0 0 50px;
}
}
@media only screen and (max-width: 480px) {
.price-box{
margin: 0 0 40px;
}
}

main #price h3{
margin: 0 0 10px;
padding: 20px 0;
border-radius: 20px 20px 0 0;
text-align: center;
background: url(image/price-back.png) no-repeat left center/20%,url(image/price-back.png) no-repeat right center/20%,#f8f7f3;
font-size: 25px;
border-left:1px solid #79a4ea;
border-right:1px solid #79a4ea;
border-top:1px solid #79a4ea;
}
main #price h4{
margin: 0 0 10px;
padding: 20px 0;
border-radius: 20px 20px 0 0;
text-align: center;
background: #f8f7f3;
font-size: 20px;
}
main #price h5{
margin: 0 0 10px;
padding: 20px 0;
border-radius: 20px 20px 0 0;
text-align: center;
background: #d2c1de;
font-size: 20px;
color: #fff;
}
#price p{
margin: 0 3% 30px;
text-align: justify;
font-size: 18px;
}
#price p.p16{
font-size: 16px;
margin: 0 3% 20px;
line-height: 120%;
}
@media only screen and (max-width: 640px) {
#price p{
font-size: 17px;
}
#price p.p16{
font-size: 15px;
}
}
@media only screen and (max-width: 480px) {
main #price h3{
padding: 15px 0;
border-radius:15px 15px 0 0;
background: url(image/price-back.png) no-repeat left center/20%,url(image/price-back.png) no-repeat right center/20%,#f8f7f3;
font-size: 20px;
}
main #price h4{
padding: 15px 0;
border-radius: 15px 15px 0 0;
font-size:18px;
}
main #price h5{
padding: 15px 0;
border-radius: 15px 15px 0 0;
font-size: 18px;
}
#price p{
font-size: 16px;
margin: 0 3% 20px;
}
#price p.p16{
font-size: 14px;
}
}

#price ul{
margin: 0;
padding: 0 3%;
}
#price li{
margin: 0 0 15px;
padding: 0 0 15px;
border-bottom: 1px dashed #666;
text-align: left;
font-size: 18px;
line-height: 120%;
font-weight: 600;
list-style-position: inside;
display: flex;
justify-content:space-between;
}
#price li strong{
font-weight: 600;
}
#price li em{
font-size: 14px;
font-style: normal;
font-weight: 600;
color: #5484d3;
padding: 0 0 0 5px;
}
@media only screen and (max-width: 414px) {
#price li{
font-size: 16px;
}
}

#access{
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
#access img{
max-width: 100%;
margin: 0 0 40px;
}
#access ol{
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
#access li{
text-align: left;
margin: 0 0 30px;
list-style-position: inside;
font-size: 18px;
}
#access li strong{
font-weight: 600;
font-size: 20px;
}
@media only screen and (max-width: 640px) {
#access li{
font-size: 16px;
}
#access li strong{
font-size: 18px;
}
}
@media only screen and (max-width: 480px) {
#access li{
line-height: 120%;
margin: 0 0 20px;
}
}

#access-info{
width: 100%;
height: auto;
margin: 0;
padding: 0;
display: flex;
}
#access-info img{
width: 35%;
margin: 0 0 0 5%;
}
@media only screen and (max-width: 640px) {
#access-info{
flex-direction: column;
}
#access-info img{
width: 50%;
margin: 0;
}
}
@media only screen and (max-width: 480px) {
#access-info img{
width: 80%;
}
}
@media only screen and (max-width: 414px) {
#access-info img{
width: 90%;
}
}

#flow{
width: 100%;
height: auto;
margin: 0;
padding: 0;
}

#flow ol{
width: 100%;
height: auto;
margin: 0;
padding: 0;
display: flex;
}
#flow ol li{
width: 23%;
margin: 0 2% 0 0;
list-style-type: none;
font-size: 18px;
}
#flow ol li strong{
font-weight: 600;
font-size: 22px;
background: #d6e4fa;
color: #225798;
border-radius: 60px;
display: block;
padding: 5px 0;
margin: 0 0 15px;
}
#flow ol li:nth-child(even) strong {
  background: #e4d9f1;
  color: #203151;
}
#flow ol li img{
max-width: 100%;
}
@media only screen and (max-width: 1080px) {
#flow ol li strong{
font-size: 20px;
}
}
@media only screen and (max-width: 835px) {
#flow ol{
flex-wrap: wrap;
}
#flow ol li{
width: 48%;
margin: 0 2% 20px 0;
font-size: 18px;
}
#flow ol li img{
max-width: 60%;
}
}
@media only screen and (max-width: 640px) {
#flow ol li img{
max-width: 70%;
}
#flow ol li{
font-size: 17px;
line-height: 150%;
}
}
@media only screen and (max-width: 480px) {
#flow ol li img{
max-width: 90%;
}
#flow ol li{
font-size: 16px;
}
}
@media only screen and (max-width: 414px) {
#flow ol li{
width: 100%;
margin: 0 0 20px 0;
}
#flow ol li img{
max-width: 60%;
}
}

#flow-nayami{
width: 100%;
height: auto;
margin: 100px 0 0;
padding: 0;
display: flex;
justify-content:space-between;
align-items: flex-start;
}
@media only screen and (max-width: 1080px) {
#flow-nayami{
flex-wrap: wrap;
margin: 80px 0 0;
}
}
@media only screen and (max-width: 835px) {
#flow-nayami{
margin: 50px 0 0;
}
}
@media only screen and (max-width: 480px) {
#flow-nayami{
margin: 40px 0 0;
}
}

#flow-nayami h3{
width: 30%;
text-align: center;
font-size: 35px;
line-height: 130%;
font-weight: 600;
margin: 0;
padding: 70px 0 30px;
background: none;
background: url(image/flow-h3b.png) no-repeat top center/30%,url(image/flow-h3.png) no-repeat bottom center/200px;
}
#flow-nayami div{
width: 20%;
text-align: center;
}
#flow-nayami img{
max-width: 80%;
margin: 0 auto;
display: block;
}
@media only screen and (max-width: 1080px) {
#flow-nayami h3{
width: 100%;
margin: 0 0 40px;
background: url(image/flow-h3b.png) no-repeat top center/15%,url(image/flow-h3.png) no-repeat bottom center/200px;
}
#flow-nayami div{
width: 30%;
}
#flow-nayami img{
max-width: 60%;
}
}
@media only screen and (max-width: 835px) {
#flow-nayami img{
max-width: 70%;
}
}
@media only screen and (max-width: 640px) {
#flow-nayami h3{
padding: 60px 0 30px;
background: url(image/flow-h3b.png) no-repeat top center/20%,url(image/flow-h3.png) no-repeat bottom center/200px;
}
}
@media only screen and (max-width: 480px) {
#flow-nayami h3{
padding: 60px 0 30px;
background: url(image/flow-h3b.png) no-repeat top center/25%,url(image/flow-h3.png) no-repeat bottom center/200px;
font-size: 30px;
}
#flow-nayami div{
width: 100%;
display: flex;
align-items: flex-start;
margin: 0 0 20px;
}
#flow-nayami img{
max-width: 25%;
margin: 0 15px 0 0;
}
}

#flow-nayami p{
font-size: 18px;
margin: 0;
text-align: justify;
line-height: 160%;
}
#flow-nayami p strong{
display: block;
border-bottom:5px solid #c9ddfd;
margin: 0 0 10px;
padding: 0 0 3px;
}
@media only screen and (max-width: 835px) {
#flow-nayami p{
font-size: 17px;
}
}

#negai{
width: 100%;
height:auto;
margin: 100px 0 0;
padding:80px 3%;
background: url(image/negai-bottom.webp) no-repeat center bottom/100%,url(image/negai-top.webp) no-repeat center top/100%,url(image/negai-cat.webp) no-repeat left bottom,#faf9f7;
border-radius: 20px;
display: flex;
justify-content:space-between;
align-items: flex-start;
}
@media only screen and (max-width: 1080px) {
#negai{
flex-direction: column;
padding:80px 3% 300px;
}
}
@media only screen and (max-width: 480px) {
#negai{
padding:50px 3% 300px;
}
}

#negai h4{
width: 30%;
text-align: center;
font-size: 30px;
line-height: 130%;
font-weight: 600;
margin: 0;
padding: 70px 0 20px;
color: #896dad;
background: url(image/negai-h4.png) no-repeat top center/55%,url(image/negai-back.png) no-repeat bottom center/200px;
}
#negai ul{
width: 68%;
background: #fffeff;
border-radius: 20px;
padding: 20px;
margin: 20px 0;
display: flex;
flex-direction: column;
}
#negai li{
  list-style-type: none;
  margin: 0 0 20px;
  padding: 0 0 20px;
  border-bottom: 1px dashed #d2c1de;
  font-size: 18px;
  text-align: left;
  display: flex;         /* 横並びにするため追加 */
  align-items: flex-start; /* 上揃えにする */
  gap: 15px;             /* 画像とテキストの間の余白 */
}
#negai li img{
  display: block;
  /* float: left; を削除 */
  max-width: 150px;
  margin: 0; /* float時のmarginは gap で代用するため削除または調整 */
  flex-shrink: 0; /* 画像が縮んでしまうのを防ぐ */
}
@media only screen and (max-width: 1080px) {
#negai h4{
width: 100%;
font-size: 30px;
padding: 70px 0 20px;
background: url(image/negai-h4.png) no-repeat top center/22%,url(image/negai-back.png) no-repeat bottom center/200px;
}
#negai ul{
width: 100%;
margin: 20px 0 0;
}
#negai li{
font-size: 16px;
}
}
@media only screen and (max-width: 640px) {
#negai h4{
font-size: 25px;
padding: 70px 0 20px;
background: url(image/negai-h4.png) no-repeat top center/30%,url(image/negai-back.png) no-repeat bottom center/200px;
}
#negai li{
font-size: 16px;
line-height: 150%;
}
}
@media only screen and (max-width: 480px) {
  #negai h4{
    background: url(image/negai-h4.png) no-repeat top center/40%,url(image/negai-back.png) no-repeat bottom center/200px;
  }
  #negai ul{
    align-self:stretch;
  }
  #negai li img{
    max-width: 60px;
    /* margin: 0 10px 0 0; も gap が効くため不要に */
  }
}

#re{
}

#re h3,#re h4{
background: #eee;
font-size: 25px;
}
#re h5{
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0 0 5px;
text-align: left;
line-height: 120%;
border-bottom: 1px solid #333;
font-size: 22px;
}
@media only screen and (max-width: 1080px) {
#re h3,#re h4{
margin: 40px 0 20px;
font-size: 22px;
}
}
@media only screen and (max-width: 640px) {
#re h3,#re h4{
margin: 30px 0 15px;
font-size: 20px;
}
#re h5{
font-size: 20px;
}
}
@media only screen and (max-width: 480px) {
#re h3,#re h4{
font-size: 18px;
}
#re h5{
font-size: 18px;
}
}

#re ul,#re ol{
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 0 0 0 10%;
}
#re ul li,#re ol li{
margin: 0 0 15px;
padding: 0;
text-align: left;
font-size: 18px;
line-height: 150%;
}
#re ol ol{
margin: 20px 0 30px;
}
#re ol ol li{
list-style-type: lower-latin;
}
@media only screen and (max-width: 640px) {
#re ul,#re ol{
margin: 0 0 30px;
}
#re ul li,#re ol li{
font-size: 16px;
}
}
@media only screen and (max-width: 480px) {
#re ul,#re ol{
padding: 0 0 0 4%;
}
}
@media only screen and (max-width: 414px) {
#re ul,#re ol{
padding: 0 0 0 5%;
}
}

#yoyaku{
width: 100%;
height: auto;
margin: 0;
padding: 0;
display: flex;
justify-content:space-between;
align-items: flex-start;
}
.yoyaku-box{
width: 47%;
padding: 90px 15px 15px;
border:3px solid #79a4ea;
border-radius: 15px;
text-align: center;
background: url(image/yoyaku-icon1.png) no-repeat top center/auto 90px,url(image/yoyaku-back-l.png) no-repeat bottom left,url(image/yoyaku-back-r.png) no-repeat bottom right;
align-self:stretch;
}
.yoyaku-box:last-of-type{
background: url(image/yoyaku-icon2.png) no-repeat 46% top/auto 90px,url(image/yoyaku-back-l.png) no-repeat bottom left,url(image/yoyaku-back-r.png) no-repeat bottom right;
border:3px solid #ad78d3;
}
main #yoyaku p{
text-align: center;
color: #79a4ea;
font-size: 25px;
line-height: 120%;
margin: 0 0 10px;
font-weight: 700;
}
main #yoyaku .yoyaku-box:last-of-type p{
color: #ad78d3;
}
#yoyaku img{
max-width: 30%;
margin: 0 0 10px;
}
main #yoyaku span{
display: block;
border-radius: 60px;
background: #06c755;
padding: 10px 0;
width: 60%;
margin: 0 20%;
}
main #yoyaku span a{
color: #fff;
text-decoration: none;
font-weight: 500;
}
@media only screen and (max-width: 1080px) {
.yoyaku-box{
padding: 80px 15px 15px;
background: url(image/yoyaku-icon1.png) no-repeat top center/auto 80px,url(image/yoyaku-back-l.png) no-repeat bottom left,url(image/yoyaku-back-r.png) no-repeat bottom right;
align-self:stretch;
}
.yoyaku-box:last-of-type{
background: url(image/yoyaku-icon2.png) no-repeat 46% top/auto 80px,url(image/yoyaku-back-l.png) no-repeat bottom left,url(image/yoyaku-back-r.png) no-repeat bottom right;
}
#yoyaku img{
max-width:40%;
}
main #yoyaku span{
width: 70%;
margin: 0 15%;
font-size: 18px;
}
}
@media only screen and (max-width: 835px) {
.yoyaku-box{
padding: 70px 15px 15px;
background: url(image/yoyaku-icon1.png) no-repeat top center/auto 70px,url(image/yoyaku-back-l.png) no-repeat bottom left,url(image/yoyaku-back-r.png) no-repeat bottom right;
align-self:stretch;
}
.yoyaku-box:last-of-type{
background: url(image/yoyaku-icon2.png) no-repeat 46% top/auto 70px,url(image/yoyaku-back-l.png) no-repeat bottom left,url(image/yoyaku-back-r.png) no-repeat bottom right;
}
#yoyaku img{
max-width:50%;
}
main #yoyaku p{
font-size: 20px;
}
}
@media only screen and (max-width: 640px) {
.yoyaku-box{
padding: 70px 10px 10px;
background: url(image/yoyaku-icon1.png) no-repeat top center/auto 70px,url(image/yoyaku-back-l.png) no-repeat bottom left/50px,url(image/yoyaku-back-r.png) no-repeat bottom right/50px;
align-self:stretch;
}
.yoyaku-box:last-of-type{
background: url(image/yoyaku-icon2.png) no-repeat 46% top/auto 70px,url(image/yoyaku-back-l.png) no-repeat bottom left/50px,url(image/yoyaku-back-r.png) no-repeat bottom right/50px;
}
main #yoyaku p{
font-size: 18px;
}
main #yoyaku span{
width: 80%;
margin: 0 10%;
font-size: 16px;
padding: 5px 0;
}
}
@media only screen and (max-width: 520px) {
main #yoyaku p{
font-size: 17px;
}
}
@media only screen and (max-width: 480px) {
#yoyaku{
flex-wrap: wrap;
flex-direction: column;
}
.yoyaku-box{
width: 100%;
margin: 0 0 20px;
}
.yoyaku-box:last-of-type{
background: url(image/yoyaku-icon2.png) no-repeat 47% top/auto 70px,url(image/yoyaku-back-l.png) no-repeat bottom left/50px,url(image/yoyaku-back-r.png) no-repeat bottom right/50px;
}
main #yoyaku p{
font-size: 22px;
}
#yoyaku img{
max-width:30%;
}
}
@media only screen and (max-width: 414px) {
#yoyaku img{
max-width:40%;
}
}

/*フッタ
--------------------------------------------------------------------------*/
#page-top{
	width:40px;
	height:40px;
	display:none;
	position:fixed;
	right:16px;
	bottom:16px;
	color:#fff;
} 
#page-top p{
	margin:0;
	padding:0;
	text-align:center;
	background:#c9ddfd;
	transition:all 0.3s;
	color:#fff;
} 
#page-top p:hover{
	background:#181f59;
	color:#fff;
} 
#move-page-top{
	color:#fff;
	line-height:40px;
	text-decoration:none;
	display:block;
	cursor:pointer;
}

footer{
width: 100%;
height: auto;
margin: 0;
padding: 20px 3% 20px;
background: #fff;
display: flex;
justify-content:space-between;
border-top:1px solid #9fc2fb;
}
address{
font-style: normal;
text-align: left;
line-height: 160%;
margin: 0;
padding: 0;
}
footer h6{
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 0;
text-align: left;
line-height: 150%;
font-size: 20px;
font-weight: 400;
}
footer h6 strong{
font-weight: 600;
font-size: 30px;
line-height: 150%;
}
footer p{
text-align: left;
font-size: 20px;
margin: 0;
}
@media only screen and (max-width: 1600px) {
footer p{
font-size: 16px;
}
}
@media only screen and (max-width: 1080px) {
footer h6{
font-size: 16px;
margin: 0 0 10px;
}
footer h6 strong{
font-size: 25px;
}
}
@media only screen and (max-width: 640px) {
footer{
padding: 10px 3% 10px;
}
footer h6{
font-size: 14px;
}
footer h6 strong{
font-size: 20px;
}
footer p{
font-size: 14px;
line-height: 120%;
}
}

footer ul{
width: 60%;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
footer li{
flex: 1;
  margin: 0;
  padding: 10px 0;
  list-style-type: none;
  border-right: 2px solid #c4d5f1;
  text-align: center;
}
footer li:last-of-type{
border-right:none;
}
footer li a:link,footer li a:visited{
display: block;
  text-decoration: none;
  color: #222;
  width: 100%;
  text-align: center;
  line-height: 100%;
  font-size: 16px;
}
footer li a:hover{
text-decoration: underline;
}
@media only screen and (max-width: 1280px) {
footer ul{
display: none;
}
}