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

/*=============================================
***********************************************

　　共通

***********************************************
=============================================*/
body{
	color: #004098;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-style: normal;
	font-size: 16px;
	line-height: 1.5;
	font-weight: 600;
	text-align: center;
	box-sizing: border-box;
	background-color: #004098;
}
.flexbox{
	display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}
.wrapper{
	max-width:1200px ;
	width: 95%;
    margin: 0 auto;
    position: relative;
	flex-wrap: nowrap;
	gap: 0 2%;
}
a{
	color: #004098;
	text-decoration: none;
}
a:hover{opacity: 0.6;}
img{max-width: 100%;}
.inner{
	width: 90%;
	margin-left:auto;
	margin-right: auto;
}
section{margin-bottom: 40px;}
.sp{display: none;}

/* フローティングボタン */
.floating_btn{
	position: fixed;
	width: 400px;
	margin: 0 1%;
	background-color: #FF7AAC;
	border-radius:10px;
	z-index: 5;
	transition: bottom 0.4s ease;
	bottom: -100px; /* 初期は画面外 */
}
.floating_btn.show {bottom: 10px; /* 表示位置 */}
.floating_btn.hide {bottom: -100px; /* フッターに到達で非表示 */}
.floating_btn a{
	color: #fff;
	padding: .8em .5em;
	font-size:20px ;
	justify-content: center;
	line-height: 1;
}
.floating_btn a span{font-size: 70%;}
.floating_btn a:hover{opacity: 1;}
.floating_btn:hover{opacity: 0.6;}

@media screen and (max-width: 430px){
	.floating_btn{
	width: 95%;
	left: 50%;
	transform: translateX(-50%);
	margin:auto;
}
}
/* フワって出る動き */
/*==
.scroll-fade-up,
.scroll-fade-down {
	opacity: 0;
  transform: translateY(40px);
	transition: all 0.6s ease-out;
}
.scroll-fade-down {transform: translateY(-40px); }
.in-view {
	opacity: 1;
	transform: translateY(0);
}
==*/
/*=============================================
***********************************************

　　headerとQR

***********************************************
=============================================*/
header{
	width: 30%;
	position: sticky;
    overflow-x: clip;
    top: 0;
    left: 0;
    height: 100vh;
}
header div{
	padding: 40px 0 30px;
	width: 100%;
	margin: 0 auto;
	position: absolute;
}
.inner_center{
	position: absolute;
	transform: translateY(-50%);
	top:50%;
	left: 0;
    right: 0;
}
header .bgimg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: fill;
	z-index: 1;
	pointer-events: none; /* 画像がクリックなどを邪魔しないように */
}
header .menu_logo{
	position: relative;
	z-index: 2;
	width: 80%;
	margin: 0 auto 10px;
}
header p{
	position: relative;
	margin-bottom: .5em;
	z-index: 2;
}
header ul{
	position: relative;
	z-index: 2;
	width: 90%;
	margin: 0 auto;
	font-size: 17px;
}
header ul li{
	position: relative;
	text-align: left;
	padding: .6em 0 .5em;
}
header ul li:not(:first-child)::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 5px;
	background-image: radial-gradient(circle, #c0e8ff 2.5px, transparent 2.5px);
	background-size: 14px 5px; /* 横: 5pxの丸 + 9px間隔 = 14px */
	background-repeat: repeat-x;
}
header ul li a{display: block;}
header ul li a span{
	padding: 0px 6%;
	display: block;
}
@media screen and (max-width: 1420px){
	header ul{font-size: 15px;width: 90%;}
	header ul li:not(:first-child)::before {
		height: 3px;
		background-image: radial-gradient(circle, #c0e8ff 2px, transparent 2px);
		background-size: 12px 3px; /* 横: 5pxの丸 + 9px間隔 = 14px */
	}
}
@media screen and (max-width: 1110px){
	header div {padding: 30px 0;}
	header ul{font-size: 13px;}
	header p { font-size: 13px;}
}
.h1_pc{
	position: fixed;
	left:30px;
	top: 30px;
	z-index: 1;
	width: 250px;
}
.qr_box{
	color: #fff;
	width: 26%;
	position: sticky;
    overflow-x: clip;
    top: 0;
    height: 100vh;
}
.qr_box p{font-size: 18px;}
.qr_box img{
	margin: 40px auto 70px;
	display: block;
}
@media screen and (max-width: 1200px){
	.qr_box p{font-size: 16px;}
	.qr_box p .pc{display: none;}
}
@media screen and (max-width: 1020px){
	.wrapper{width: 100%;}
	.pc_contents{display: none;}
}


/*=============================================
***********************************************

　　中身

***********************************************
=============================================*/
.center_contents{
	background-color: #fff;
	max-width: 430px;
	width: 100%;
	min-height: 100vh;
	overflow: hidden;
	box-shadow: 0px 2px 35px 0px rgb(8 42 87);
	/* スクロールバーのこと */
	--sb-track-color: #e62e8b;
	--sb-thumb-color: #930a4f;
	--sb-size: 3px;
}
/* スクロールバーのこと */
.center_contents::-webkit-scrollbar {width: var(--sb-size)}
.center_contents::-webkit-scrollbar-track {
	background: var(--sb-track-color);
	border-radius: 10px;
}
.center_contents::-webkit-scrollbar-thumb {
	background: var(--sb-thumb-color);
	border-radius: 10px;
}
@supports not selector(::-webkit-scrollbar) {
.center_contents {
    scrollbar-color: var(--sb-thumb-color)
	var(--sb-track-color);
}
}
@media screen and (max-width: 1020px){
	.center_contents{margin: 0 auto;}
}
/* メインビジュアル */
.mv{position: relative;}
.mv h1{
	position: absolute;
	inset:30px 5% auto auto;
}

/* contents01 */
#contents01>p{margin-bottom: 35px;}

.font_siz_20{font-size: 20px;font-weight: bolder;}
.font_siz_25{font-size: 25px;font-weight: bolder;}
.font_siz_30{font-size: 30px;font-weight: bolder;}

#contents01 .font_siz_20 b{font-size: 120%;}
#contents01 .font_siz_25 b{font-size: 150%;}

#contents01 b{background:linear-gradient(transparent 75%, #c0e8ff  75%);}
#contents01 div{margin-bottom: 30px;}
#contents01 div img{ margin: 15px auto;}
#contents01 p span{margin-right: -.5em;display: inline-block;}
#contents01 .text_left{text-align: justify;}
/* contents02 box */
#contents02 .box{
	border: solid 2px #004098;
	border-radius:32px;
	padding-bottom: 30px;
	margin-bottom: 40px;
	overflow: hidden;
}
#contents02 .box .contents02_box_title{
	background-color: #004098;
	color: #fff;
	padding:1em 0;
	text-align: center;
	font-size: 20px;
}
#contents02 .box .contents02_box_title span{
	display: block;
	font-size: 140%;
}
#contents02 .box .font_siz_25 {margin: 25px auto;}
#contents02 .box .soresuma_img{
	width:150px ;
}
#contents02 .box p{
	text-align: justify;
	width: 80%;
	margin: 2em auto;
}
#contents02 .box .main_img{
	margin: 0 auto 30px;
    width: 90%;
    max-width: fit-content;
	display: block;
}
#contents02 .box .movie{width: 70%;}
#contents02 #box01 .movie,
#contents02 #box03 .movie,
#contents02 #box04 .movie,
#contents02 #box05 .movie{width: 64%;}

/* contents03 */
#contents03{
	background-color: #fdeff5;
	padding: 100px 0 80px;
	position: relative;
}
#contents03::after,
#contents03::before{
	content: "";
	position: absolute;
	background: url(../img/maru_bg.jpg) no-repeat center top;
	width: 100%;
	height:48px ;
	margin: auto;
}
#contents03::after{
	inset: 0 0 auto 0;
	transform: rotate(180deg);
}
#contents03::before{inset: auto 0 0 0;}
#contents03 .line_height2{margin: 1.8em auto;}

#contents03 a{
	background-color: #004098;
	color: #fff;
	display: block;
	font-weight: bold;
	border-radius:5px;
	width: 50%;
	margin: 0 auto;
	padding: .7em .2em;
}
#contents03 a:hover{opacity: 0.6;}

/* contents04 */
#contents04 div{margin-bottom: 15px;}
#contents04 p{margin: .5em 0 2em;}
/* footer */
footer{
	background-color: #e62e8b;
	padding: 50px 0 0;
}
footer a{
	position: relative;
	font-size: 23px;
	display: block;
	width: 80%;
	font-weight: bolder;
	background-color: #fff;
	padding: 1em .5em;
	margin:0 auto 50px;
	border-radius:100px;
	border: solid 5px #fdeff5;
	color: #e62e8b;
}
footer a::after{
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 16px solid #e62e8b;
    border-right: 0;
    margin: auto;
    inset: 0 20px 0 auto;
}
footer a:hover{
	background-color: #e62e8b;
	opacity: 1;
	color: #fff;
}
footer a:hover::after{border-left-color: #fff;}
footer div{margin-bottom: 20px;}
footer small{
	display: block;
	background-color: #fff;
	padding: 1.5em 0;
	font-size: 12px;
	margin-top: 30px;
	font-weight: 500;
}