@charset "UTF-8";
/*
============================================================
index　コンテンツ　設定
============================================================
*/

/* ---------------------------------------------------------
■ mvエリア
--------------------------------------------------------- */
#mv_area{
    width: 100%;
    height: auto;
    min-height: 100vh;
    margin: 0 auto;
	position: relative;
	overflow: hidden;
    /*background: #fff;*/
    z-index: 1;
}

/*mvタイトル*/
.mv_tit{
    width: 95%;
    max-width: 1040px;
    margin: 0 auto;
	padding-bottom:80px;
    position: absolute;
    bottom: 20px;
    left: 50%;
    z-index: 10;
    transform: translateX(-50%);
}

.mv_tit .main_tit{
    width: 100%;
    position: relative;
    text-align: left;
}

.mv_tit .main_tit img.tit{
    width: 75.9%;
}

.mv_entry{
    width: 27.5%;
    position: absolute;
    top: 4%;
    right: 0;
    z-index: 10;
    animation: mv_entry 1s infinite alternate;
}

@keyframes mv_entry {
    0%{transform: translateY(0);}
    100%{transform: translateY(-10px);}
}

@-webkit-keyframes mv_entry {
    0%{transform: translateY(0);}
    100%{transform: translateY(-10px);}
}

/*mvスライド*/
.mv_slide_area {
    opacity: 1;
    width: 100%;
    height: auto;
    min-height: 100vh;
    object-fit: cover;
    font-family: 'object-fit: cover;'; /*IE対策*/
    position: absolute;
    left: 0;
    top: 0;
}

.mv_bg{
	position: absolute;
	width: 100%;
	height: auto;
    min-height: 100vh;
    top: 0;
    left: 0;
    background: rgba(143,158,157,0.6);
    z-index: 2;
}

.mv_slide{
    width: 100%;
    height: auto;
    min-height: 100vh;
    /*padding-top: 56.56%;*/
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: top center;
    -webkit-animation: mv_anime 15s 0s infinite;
    animation: mv_anime 15s 0s infinite;
    opacity: 0;
    z-index: 1;
}

.mv_slide:nth-child(2){
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

.mv_slide:nth-child(3){
  -webkit-animation-delay: 10s;
  animation-delay: 10s;
}

/*------------------
4枚目追加の場合は　
「-webkit-animation: mv_anime 15s」の15sを20sに
--------------------

.mv_slide:nth-child(4){
  -webkit-animation-delay: 15s;
  animation-delay: 15s;
}

--------------------------*/



@keyframes mv_anime {
    0%{
        opacity:0;
    }
    20.83%{
        opacity:1;
    }
    33.33%{
        opacity:1;
    }
    45.83%{
        opacity:0;
    }
    100%{
        opacity:0;
    }
}

@-webkit-keyframes mv_anime {
    0%{
        opacity:0;
    }
    20.83%{
        opacity:1;
    }
    33.33%{
        opacity:1;
    }
    45.83%{
        opacity:0;
    }
    100%{
        opacity:0;
    }
}


/*--------------------------------
　2023年追加分
--------------------------------*/

section{
	width:calc(100% - 40px);
	max-width:1020px;
	margin: auto;
	padding:60px 20px;
}

h2 {
    font-family: 'Questrial';
    text-align: center;
    position: relative;
	font-size: 250%;
	color: #2778be;
	font-weight:600;
}
h2 span{
	font-family: 'Kosugi';
	font-size: 40%;
	display: block;
	color: #333;
	font-weight:400;
}


h3 {
    text-align: center;
    position: relative;
	font-size: 170%;
	background-color: #d5e8f8;
	color:#333;
	padding:20px 15px;
	font-weight:600;
	border-radius: 20px;
	width:100%;
	margin: auto;
	letter-spacing: 0.12em;
}

h4 {
    text-align: center;
    position: relative;
	font-size: 120%;
	color:#333;
	padding:0 0 20px;
	font-weight:600;
	width:100%;
	margin: auto;
	letter-spacing: 0.12em;
}

/*----------------
　□　導入
----------------*/

#lead{
	
}

.lead_wrap{
	padding:30px 0 0;
}

.lead_wrap span[class^="icon"]{
	border:1px #333 solid;
	border-radius: 15px;
	padding:1px 15px;
}

.lead_wrap span[class*="blue"]{
	border:1px #2778be solid;
	color:#fff;
	font-weight:600;
	background-color: #2778be;
}

.lead_text{
	padding:20px 0 0;
	text-align: center;
	font-size:110%;
	font-weight:600;
}


/*----------------
　□　プログラム
----------------*/

.program_list{
	display: flex;
	flex-wrap: wrap;
}
.program_contents{
	position: relative;
	width:650px;
	margin:10px auto 0;
	background-color: #2778be;
	color:#fff;
	padding:20px 0;
	font-size:110%;
	font-family: 'Kosugi';
}
.program_contents::after{
	content: "";
	position: absolute;
	width:0;
	height:0;
	border-width:10px;
	border-color:#fff #fff462 #fff462 #fff;
	border-style:solid;
	top:0;
	left:0;
}
.program_contents ul{
  max-width: 340px;
  margin: auto;
  padding-left: 15px;
}
.program_contents ul li {
  padding-left:20px;
  text-align: left;
  position: relative;
  margin-bottom: 2px;
  font-size: 110%;
}
.program_contents ul li:before {
	content:"□";
	width:10px;
	height:10px;
	position: absolute;
	top: 4px;
	left: 0;
	font-size:80%;
}

.program_contents ul > li > ul{
	font-size:85%;
}
.program_contents ul > li > ul > li:before{
	content:"・";
}

.program_box .small_85{
  width: 100%;
  max-width:650px;
  margin: auto;
	padding:10px 5px 0;
	text-align: right;
}

.program_list .note{
	width:100%;
	margin:5px auto;
	max-width:650px;
	line-height:1.3;
}


/*----------------
　□　プログラム詳細
----------------*/

.pro_deil_wrap{
	display: flex;
	flex-wrap: wrap;
	max-width: 500px;
	margin:15px auto;
}
.pro_deil_line{
	max-width: 500px;
	margin:15px auto;
	text-align: center;
}

.pro_deil_title{
	display: flex;
	width:15%;
	background-color: #2778be;
	color:#fff;
	padding:2px 5px;
}
.pro_deil_title span{
	margin: auto;
}

.pro_deil_inner{
	width:85%;
	text-align: left;
	padding:0 20px;
}

.on_line{
	display: block;
	color: #2778be;
	font-weight:600;
}


/*---------------------
 ■ 26追加分
---------------------*/

.pro_deil_doublebox{
	display: flex;
	flex-wrap: wrap;
	gap:0 20px;
	margin: auto;
	max-width: 700px;
	padding-bottom: 15px;
}

.pro_deil_doubletitle{
	padding-top: 15px;
	width:100%;
}
.pro_deil_doubletitle p{
	text-align: center;
	line-height: 1.2em;
	font-weight:600;
	padding-bottom: 5px;
}

.pro_deil_topic{
	width:100%;
	font-size: 16px;
	letter-spacing: 0.05em;
	font-weight:600;
	color:#fff;
	background-color: #2778be;
	padding:4px 10px 2px;
	margin-bottom: 8px;
}

.pro_deil_doublebox .pro_deil_title{
	background-color:rgba(225,225,225,0);
	color:#333;
}
.pro_deil_doublebox .pro_deil_wrap{
	margin:0 0 auto;
	max-width: none;
	width:calc(50% - 10px);
}

.pro_deil_doublebox .pro_deil_inner{
	width:100%;
}

.pro_deil_place{
	width:100%;
	text-align: left;
	font-weight:600;
	padding:10px 5px 2px;
	border-bottom:1px #999 solid;
}

.pro_deil_note{
	width:100%;
	text-align: left;
}

.pro_deil_singlebox{
	margin: auto;
	max-width: 700px;
	padding-bottom: 15px;
}
.pro_deil_singlebox .pro_deil_title{
	width:100%;
}
.pro_deil_singlebox .pro_deil_inner{
	width:100%;
}


.pro_deil_map{
	padding:5px 0 20px;
}
.pro_deil_map iframe{
	width: 100%;
	height:350px;
}


.deliver_procedure{
	padding-top:8px;
}
.deliver_procedure li{
	position: relative;
	padding-bottom:5px;
	padding-left: 16px;
}
.deliver_procedure li::before{
	content: "▼";
    position: absolute;
    top: 0;
    left: 0;
}


/*----------------
　□　さなるってどんな会社？
----------------*/


.about{
	padding:15px 0 10px;
}

.about_box{
	position: relative;
	background-color: #d5e8f8;
	padding:20px;
	border-radius: 30px;
	margin:25px auto 0;
}
.about_box_line{
	position: absolute;
	width:100%;
	height:100%;
	top:-5px;
	left:-5px;
	border-radius: 30px;
	border-width:1px;
	border-color:#333;
	border-style:solid;
}

.about_box_line_w{
	position: absolute;
	width:3%;
	height:5px;
	top:-7px;
	right:25%;
	background-color:#fff;
	z-index: 5;
}
.about_box_line_b{
	position: absolute;
	width:3%;
	height:5px;
	bottom:3px;
	left:25%;
	background-color:#d5e8f8;
	z-index: 5;
}

.about_bg{
	position: absolute;
	top:30px;
	right:5%;
	width:30%;
	z-index: 2;
	opacity: .8;
}

.about_title{
	position: relative;
	width:75%;
	padding:3% 40px 0;
	z-index: 3;
}
.about_text{
	width:78%;
	margin: auto;
	padding:30px 0;
	font-family: 'Kosugi';
	font-size:105%;
}



/*----------------
　□　こだわり1
----------------*/

.obsession{
	display: flex;
	flex-wrap: wrap;
	border: #2778be 2px solid;
	background-color: #fff;
	border-radius: 50%;
	aspect-ratio:1 / 1;
	display: inline-block;
	margin: auto;
	padding:20px 10px 12px;
	color:#2778be;
	font-size:150%;
	font-family: 'Questrial';
}
.obsession p{
	font-weight:600;
	margin: auto;
	text-align: center;
}
.obsession span{
	display: block;
	line-height: 1em;
	font-size:150%;
}


.business_box_wrap{
	padding:30px 0 0;
}

.business{
	padding:30px 0 0;
}

.business_box{
	margin-top: 30px;
	padding:20px 0 ;
	background: url("../images/obsession_bk.png");
	background-repeat: repeat;
}

.business_box h5{
	position: relative;
	text-align: center;
	background-color:#2778be;
	color:#fff;
	margin:20px auto 0;
	padding: 10px 0;
	font-size: 120%;
	font-family: 'Kosugi';
}
.business_box h5 .sp_br{
	display: none;
}

.business_box h5 img{
	position:absolute;
	width:70px;
	left:-4%;
	top:-34px
}

.business_box h5 span{
	color:#fff462;
}

.business_box_text{
	text-align: center;
	font-size: 120%;
	color: #333;
	font-weight: 600;
	width: 100%;
	margin: auto;
	padding:10px 10px 0;
	letter-spacing: 0.12em;
	line-height: 1.4em;
}

.bis_img_box_a{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	padding:20px 20px 0;
}

.bis_img_box_a img{margin:0 0 auto;}

.bis_img_box_a img:nth-child(1){
	width:23%;
	margin-right: 2%;
}
.bis_img_box_a img:nth-child(2){
	width:49%;
	margin-right: 2%;
}
.bis_img_box_a img:nth-child(3){
	width:23%;
}

.bis_img_box_b{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	padding:20px 20px 0;
}
.bis_img_box_b img{
	width:24%;
	margin: auto;
}

/*----------------
　□　さなるnetwork
----------------*/

.network_box{
	padding-top:15px;
}

.network_img{
	margin:20px auto;
	background-color:#f3f8fc;
	font-size: 130%;
}

.network_img h5{
	color:#2778be;
	font-weight:600;
	background-color:#c5dff5;
	padding:10px 0;
}

.network_img img[src*="map"]{
	padding: 10px 50px;
}

.network_img img[src*="logo"]{
	padding:25px 0 0;
}

.network_img img[src*="pc"]{padding:25px 30px 0;}
.network_img img[src*="tb"]{display: none;width:90%;}
.network_img img[src*="sp"]{display: none;}

@media screen and ( max-width:767px) {
	.network_img img[src*="pc"]{display: none;}
	.network_img img[src*="tb"]{display: inline;}
}
@media screen and ( max-width:520px) {
	.network_img img[src*="tb"]{display: none;}
	.network_img img[src*="sp"]{display: inline;width:70%;}
}


/*----------------
　□　お問い合わせ
----------------*/

#contact{
	padding: 0 20px 120px;	
}

.contact_text{
	text-align: center;
	padding-top:20px;
}

/*----------------
　□　申し込みボタン
----------------*/

.button_line{
	margin:10px auto 100px;
}

.button_line h3{
	text-align: center;
    position: relative;
	font-size: 100%;
	background: none;
	border-radius: 0;
}

.button_line a{
	cursor: pointer;
	position: relative;
	display: inline-block;
	width:42%;
	margin: auto 1%;
	background-color: #2778be;
	color: #fff;
	padding: 15px 0;
	font-size: 110%;
	font-family: 'Kosugi';
	transition: .2s;
}
.button_line a::after{
	content: "";
	position: absolute;
	width:100%;
	height:100%;
	background-color: #333;
	top:5px;
	left:5px;
	z-index: -1;
	transition: .2s;
}

.button_line a::before{
	content: "";
	position: absolute;
	width:10px;
	height:10px;
	border-width:2px;
	border-color:#fff #fff transparent transparent;
	border-style:solid;
	top:38%;
	right:17px;
	transform: rotate(45deg);
	transition: .2s;
}

@media screen and ( min-width:521px) {
	.button_line a:hover{
		background-color: #fff438;
		color: #333;
	}
	.button_line a:hover::before{
		border-color:#333 #333 transparent transparent;
	}
	.button_line a:hover::after{
		background-color: #eee;
		top:0;
		left:0;
	}
}

/*----------------
　□　申し込みボタン POPアップ
----------------*/

.pop_link{
	text-align: center;
}
.pop_btn{
	display: flex;
	flex-wrap: wrap;
	margin: auto;
	text-align: center;
}

.pop_link p{
	color: #333;
	margin: auto;
	padding: 10px 20px 5px;
    font-size: 130%;
	letter-spacing: 0.02em;
	text-align: center;
	font-weight:600;
	font-family: 'Questrial';
}

.pop_link a{
	display:block;
	margin: 20px 10px;
    padding: 16px 60px 16px 40px;
	background-color:#fff438;
	color:#333;
    line-height: 100%;
    border-radius: 25px;
    font-family: 'Kosugi';
    font-size: 129%;
    position: relative;
	filter:drop-shadow(1px 2px 0.2em rgba(0,0,0,.3));
    transition: 0.3s;
}

.pop_link a::after{
	content: "";
	position: absolute;
	width:10px;
	height:10px;
	border-width:2px;
	border-color:#333 #333 transparent transparent;
	border-style:solid;
	top:38%;
	right:25px;
	transform: rotate(45deg);
	transition: .2s;
}

@media screen and ( min-width:521px) {
	.pop_link a:hover{
		background-color: #2778be;
		color: #fff;
		filter:drop-shadow(1px 2px 0.2em rgba(0,0,0,0));
	}
	.pop_link a:hover::after{
		border-color:#fff #fff transparent transparent;
		right:16px;
	}
}