﻿@charset "utf-8";
/* Foundation
***********************************************************************/
:root{
	--color-primary: #192a8a;
	--color-primary-pail: #d8e0f0;
	--color-primary-light: #a9bcde;
	--color-accent: #f27522;
	--color-secondary-light: #daccca;
}
*,
:before,
:after{
	box-sizing:border-box;
}
html{
	font-size: 62.5%;
}
body{
	color:#252525;
	font-family:'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	font-size: 1.6rem;
	line-height: 1.8;
	letter-spacing: .02em;
	min-width: 320px;
	-webkit-text-size-adjust:100%;
	word-wrap:break-word;
	overflow-x: hidden;
}
img{
	max-width:100%;
	vertical-align:middle;
	height:auto;
	-ms-interpolation-mode:bicubic;
}
:not(.img_box) > img,
.img_box{
	max-width:100%;
	text-align: center;
}
figure{
	display: grid;
	place-content: center;
}

/* a
***********************************************************************/
a{
	text-decoration: none;
}
main a:not([class]){
	text-decoration: underline;
	color: var(--color-primary);
}
.btn_area{
	display: grid;
	gap: 10px 15px;
	grid-template-columns: repeat(auto-fit, minmax(200px, auto));
	margin: 15px auto 0;
	justify-items: center;
}
.btn_m,
.btn_l{
	display:inline-grid;
	align-items: center;
	min-height: 48px;
	font-weight:bold;
	border-radius: 5px;
	line-height: 1.5;
}
.btn_m{
	grid-template-columns: auto 1fr;
	padding: 8px 15px;
}
.btn_l{
	grid-template-columns: auto auto 1fr;
	padding: 1em 30px;
	box-shadow: 2px 2px 10px rgba(0,0,0,.3);
}
.btn_m::after,
.btn_l::after{
	content:"";
	display: inline-block;
	margin-left: 10px;
	width: 10px;
	height: 10px;
	border-top: 3px solid;
	border-right: 3px solid;
	transform:rotate(45deg);
	justify-self: end;
}
.btn_m img,
.btn_l img{
	margin-right: 8px;
}
.btn_primary{
	color: #fff;
	background: var(--color-primary);
}
.btn_accent{
	color: #fff;
	background: var(--color-accent);
}
:is(.btn_m, .btn_l)[href^="#"]::after{
	position: relative;
	bottom: 3px;
	transform:rotate(135deg);
}

/* layout
----------------------------------------------------------------------*/
.layout{
	padding-right: 20px!important;
	padding-left: 20px!important;
	margin: 0 auto;
	max-width: 1000px;
}

/* header
----------------------------------------------------------------------*/
.header_inner{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	box-shadow: 1px 1px 5px rgba(0,0,0,.3);
	background: #fff;
	z-index: 99;
}
.h_logo{
	margin-right: auto;
	padding: 10px 0;
	padding-right: 20px!important;
	height: 50px;
}
.h_logo a{
	display: inline-block;
}
.h_logo img{
	height: 30px;
}
.h_item{
	width: 100%;
	flex: 1;
}
nav{
	flex: 1;
}
#gnav.is-fixed{
	display: none;
	top: 108px;
	left: 0;
	width: 100%;
	height: 100%;
	background: #202749;
	z-index: -1;
}
#gnav li{
	display: none;
}
#gnav.is-fixed li{
	display: block;
}
#gnav li{
	border-bottom: 1px solid #fff;
}
#gnav li:first-child{
	border-top: 1px solid #fff;
}
#gnav li a{
	display: inline-block;
	padding: 15px;
	width: 100%;
	color: #fff;
	font-weight: bold;
}
header .btn_area{
	display: flex;
	justify-content: flex-end;
	gap: 0;
	min-height: 50px;
	margin-top: 0;
}
.btn_header{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 8px 20px;
	width: 100%;
	color: #fff;
	font-size: 1.4rem;
	font-weight: bold;
	text-align: center;
	line-height: 1.5;
}
.btn_header img{
	margin-right: 4px;
	width: 16px;
}
.btn_header img + span{
	vertical-align: middle;
}
.btn_header .u-fz-12{
	font-weight: normal;
}
.btn_h_tel{
	background: var(--color-primary);
}
#hamburger_menu{
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	right: 0;
	width: 50px;
	height: 50px;
	background: #202749;
	cursor: pointer;
}
#hamburger_menu span{
	display: block;
	position: relative;
	width: 30px;
	height: 3px;
	background: #fff;
}
#hamburger_menu span::before, #hamburger_menu span::after{
	content: "";
	position: absolute;
	left: 0;
	width: inherit;
	height: inherit;
	background: #fff;
	transition: transform .2s;
}
#hamburger_menu span::before{
	top: -8px;
}
#hamburger_menu span::after{
	top: 8px;
}
#hamburger_menu.is-active span{
	background: transparent;
	z-index: 100;
}
#hamburger_menu.is-active span::before, #hamburger_menu.is-active span::after{
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}
#hamburger_menu.is-active span::before{
	transform: rotate(45deg);
}
#hamburger_menu.is-active span::after{
	transform: rotate(135deg);
}

/* mv
----------------------------------------------------------------------*/
.mv{
	padding-top: 108px;
	max-width: 100%;
	background: var(--color-primary-light);
}
.mv_grid{
	padding: 20px 0 30px;
}
.mv .balloon_wrap{
	text-align: center;
}
.mv .balloon{
	--bg: var(--color-primary);
	padding: 4px 20px;
	color: #fff;
	font-weight: bold;
}
.mv .balloon::before{
	z-index: 0;
}
.mv .balloon img{
	margin-right: 8px;
}
.mv_ttl{
	margin-bottom: 10px;
	color: var(--color-primary);
	font-size: 2.8rem;
	font-weight:bold;
	text-align: center;
	line-height: 1.5;
	opacity: 0;
	animation: mv_ttl .6s ease-out .2s forwards;
}
@keyframes mv_ttl{
	100%{
		opacity: 1;
	}
}
.mv_subttl{
	font-size: 1.6rem;
}
.mv .media_item + .media_item{
	margin-top: 30px;
	text-align: center;
}

/*mv_price*/
.mv_price_wrap{
	text-align: center;
	margin-bottom: 15px;
}
.mv_price{
	display: inline-flex;
	gap: 8px;
	padding: 10px;
	align-items: center;
	border: 1px solid #fff;
	font-weight: bold;
}
.mv_price + p{
	margin-top: 4px;
	font-size: 1.2rem;
}

.mv .btn_area{
	justify-items: normal;
	justify-content: center;
}

/* main
----------------------------------------------------------------------*/
.sec_ttl,
.article_ttl{
	font-size: 2.2rem;
	font-weight: bold;
	text-align: center;
	line-height: 1.5;
}
.sec_subttl{
	display: block;
	font-size: 1.4rem;
}
.sec_ttl{
	padding-top: 60px;
	margin-bottom: 30px;
}
.sec_ttl + .txt_area{
	text-align: center;
}
.sec_item{
	margin-top: 30px;
}
.sec_item + .sec_item{
	margin-top: 60px;
}
.sec_item:last-child{
	padding-bottom: 70px;
}
sup{
	font-size: 1.2rem;
	vertical-align: super;
}
.txt_area p + p{
	margin-top: 1em;
}
.item_ttl{
	font-weight: bold;
	line-height: 1.5;
}

/*border_sec*/
.border_sec{
	position: relative;
}
.border_sec::before {
	content: "";
	position: absolute;
	top: -2px;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: calc(100% - 40px);
	border-top: 4px dotted #ccc;
}
.border_sec .sec_ttl{
	padding-top: 60px;
}

/*article*/
article + article{
	margin-top: 30px;
}
article{
	position: relative;
}
.article_ttl{
	padding: 115px 20px 0;
	margin-bottom: 25px;
}
.article_ttl + .img_box{
	position: absolute;
	top: 20px;
	left: 0;
	right: 0;
	margin: 0 auto;
}

/*underline*/
.underline{
	background: linear-gradient(transparent 70%, #fff 30%);
}

/*banner*/
.banner_area{
	padding: 30px 0;
	background: var(--color-primary-pail);
	text-align: center;
}
.banner_area .sec_ttl{
	padding: 60px 20px 0;
	margin-bottom: 30px;
}
.banner{
	text-align: center;
}
.banner + .banner{
	margin-top: 15px;
}
.banner img.is-pc{
	display: none;
}

/*balloon*/
.balloon{
	--bg: var(--color-primary-pail);
	display: inline-block;
	position: relative;
	padding: 20px;
	background: var(--bg);
	border-radius: 10px;
}
.balloon::before{
	content: "";
	position: absolute;
	bottom: -18px;
	left: 0;
	right: 0;
	margin: auto;
	width: 0;
	height: 0;
	border: 8px solid transparent;
	border-top: 10px solid var(--bg);
	z-index: -1;
}

/*lightbox*/
[rel="lightbox"]{
	pointer-events: none;
}

/*card*/
.card_wrap{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px 30px;
}
.card{
	background: var(--color-primary-pail);
	border-radius: 10px;
}
.card_shadow{
	background: #fff;
	box-shadow: 1px 1px 5px rgba(0,0,0,.3);
}
.card_wrap .card{
	display: flex;
	flex-direction: column;
	padding: 15px;
	width: 100%;
	max-width: 500px;
	margin: 10px;
}
.card > .img_box{
	min-height: 0%;
	margin-bottom: 10px;
}
.card .ttl{
	font-weight: bold;
	text-align: center;
	margin-bottom: 5px;
}
.card > .txt_area{
	text-align: center;
}
.card strong:last-child{
	margin-top: 20px;
	color: #009260;
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
}
.card_border{
	background: #fff;
	border: 3px solid #009260;
}
.card_border .ttl{
	padding: 15px;
	margin: -15px -15px 15px;
	max-width: none;
	background: var(--color-primary-pail);
	font-size: 2rem;
}
.card_border > .txt_area{
	text-align: left;
}

/*media*/
:is(.media, .media_rev) > * + *{
	margin-top: 15px;
}

/*dl*/
dl + dl{
	margin-top: 15px;
}
dt{
	font-weight: bold;
}

/*merit*/
.list_merit{
	counter-reset: list_merit;
}
.list_merit > li{
	position: relative;
	padding-top: 15px;
}
.list_merit > li::before{
	content: counter(list_merit, decimal-leading-zero);
	counter-increment: list_merit;
	position: absolute;
	inset: 0 160px auto 0;
	margin: 0 auto;
	width: 1.5em;
	color: var(--color-primary);
	font-weight: bold;
	font-size: 6rem;
	line-height: 1;
}
.merit_content{
	counter-reset: merit_content;
}
.merit_content .item_ttl{
	margin-bottom: 15px;
	font-size: 2.2rem;
}
.merit_content .item_ttl::before{
	content: counter(merit_content, decimal-leading-zero);
	counter-increment: merit_content;
	display: block;
	margin-bottom: 15px;
	color: var(--color-primary);
	font-weight: bold;
	font-size: 6rem;
	line-height: 1;
}
.merit_content .media_rev + .media_rev{
	margin-top: 60px;
}

/*grid*/
.grid{
	display: grid;
	gap: 60px 30px;
}
.grid .item_ttl{
	text-align: center;
}
.grid.item2{
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.subgrid{
	display: grid;
	gap: 15px;
	grid-template-rows: subgrid;
}
.subgrid.item2{
	grid-row: span 2;
}
.subgrid.item3{
	grid-row: span 3;
}
.subgrid.item4{
	grid-row: span 4;
}
.subgrid.item5{
	grid-row: span 5;
}
.subgrid > *{
	margin-top: 0 !important;
}
.subgrid figure{
	place-content: center;
}
.subgrid .item_ttl{
	margin-bottom: 0;
}

/*voice*/
.list_voice .balloon::before{
	bottom: -20px;
	margin: 0;
	border-width: 20px;
}
.list_voice{
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: start;
	gap: 25px 15px;
	margin-top: 30px;
}
.list_voice > li{
	padding: 15px 10px;
	animation: list_voice ease-in-out 3s infinite;
}
.list_voice > li:nth-of-type(3n + 1),
.list_voice > li:nth-of-type(3n){
	animation-delay: 1s;
}
@keyframes list_voice {
0% {
transform: translate(0);
}
50% {
transform: translate(-2px, -10px);
}
100% {
transform: translate(0);
}
}
.list_voice > li:nth-child(odd)::before{
	left: auto;
	right: 20px;
	border-right: 20px solid var(--bg);
}
.list_voice > li:nth-child(even)::before{
	right: auto;
	left: 20px;
	border-left: 20px solid var(--bg);
}
.age{
	display: inline-block;
	margin-top: 8px;
	color: #666;
	font-weight: bold;
	text-align: center;
}
.list_voice .txt_area{
	text-align: left;
	line-height: 1;
}

/*price*/
.price{
	max-width: 400px;
	margin: 0 auto;
	border: 2px solid var(--color-primary);
}
.price_ttl{
	padding: 8px;
	background: var(--color-primary);
	color: #fff;
	font-weight: bold;
	text-align: center;
}
.price_content{
	padding: 10px;
	font-weight: bold;
	text-align: center;
}

/*list_item_fn*/
.list_item_fn{
	display: none;
	justify-content: center;
	flex-wrap: wrap;
	max-width: 800px;
	margin: 8px -5px 0;
}
.list_item_fn li{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	position: relative;
	padding: 5px;
	margin: 10px 5px 0;
	width: calc(50% - 10px);
	border: 2px solid #c7c7c7;
	text-align: center;
	line-height: 1.5;
}
.list_item_fn li a{
	display: block;
	margin: auto 0;
	text-align: center;
}
.list_item_fn .arrow{
		position: relative;
		display: inline-block;
		padding-right: 15px;
		color: #252525;
}
.list_item_fn .arrow::after{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto 0;
	width: 10px;
	height: 10px;
	border-top: 3px solid #252525;
	border-right: 3px solid #252525;
	transform: rotate(45deg);
}
.list_item_fn li.icon_op{
	padding-top: 23px;
}
.list_item_fn li.icon_op::before{
	content: "オプション";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding: 0 6px;
	background: #adadad;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
}

/*acc*/
.acc{
	position: relative;
	background: #fff;
	border-radius: 5px;
}
.acc > input[type="checkbox"]{
	display: none;
}
.acc_ttl{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	position: relative;
	padding: 4px 20px;
	max-width: 1000px;
	height: 50px;
	color: #fff;
	font-weight: bold;
	border-radius: 5px;
	background: var(--color-primary);
	cursor: pointer;
}
.acc_ttl::before,
.acc_ttl::after{
	content: "";
	display: inline-block;
	position: absolute;
	margin: auto 0;
	background: #fff;
	flex: none;
}
.acc_ttl::before{
	inset: 0 28px 0 auto;
	width: 3px;
	height: 20px;
	transition: opacity .2s;
}
.acc_ttl::after{
	inset: 0 20px 0 auto;
	width: 20px;
	height: 3px;
}
.acc_content{
	height: 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: padding .2s ease-out, opacity .2s linear, height .2s ease-out;
}
input:checked + .acc_ttl::before{
	opacity: 0;
}
input:checked ~ .acc_content{
	height: auto;
	opacity: 1;
	visibility: visible;
}
input:checked ~ .acc_content .list_item_fn{
	display: flex;
}

/*list_flow_num*/
.list_flow_num{
	position: relative;
	counter-reset: list_flow_num;
	font-weight: bold;
	z-index: 0;
}
.list_flow_num li{
	position: relative;
	padding: 50px 0 0 3em;
}
.list_flow_num li:not(:last-child)::after{
	content: "";
	position: absolute;
	top: 0;
	left: calc(1em - 2px);
	width: 4px;
	height: 100%;
	font-size: 2rem;
	background: var(--color-primary);
	z-index: -1;
}
.list_flow_num li:not(:last-child){
	padding-bottom: 18px;
}
.list_flow_num li::before{
	content: counter(list_flow_num);
	counter-increment: list_flow_num;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	margin-right: 1em;
	width: 2em;
	height: 2em;
	color: #fff;
	font-size: 2rem;
	background:  var(--color-primary);
	border-radius: 50%;
}
.list_flow_num li img{
	position: absolute;
	top: -5px;
	left: 3em;
}

/*contact*/
.contact{
	background: var(--color-primary-light);
}
.contact .sec_ttl{
	padding-top: 50px;
}
.contact .sec_item{
	color: #fff;
	text-align: center;
	padding-bottom: 50px;
}
.contact a[href^="tel:"] img{
	width: 30px;
}
.contact a:not([class^="btn"]){
	color: inherit;
}
.contact .btn_l img{
	width: 25px;
}

/* marker
----------------------------------------------------------------------*/
.marker_triangle,
.marker_triangle_circle{
	position:relative;
	z-index:0;
	padding-left:17px;
}
.marker_triangle:before,
.marker_triangle_circle:before,
.marker_triangle_circle:after{
    position:absolute;
    content:"";
}
.marker_triangle:before,
.marker_triangle_circle:before{
    left:4px;
    border:solid transparent;
	border-top-width:3px;
	border-right-width:4px;
	border-bottom-width:3px;
	border-left-width:4px;
}
.marker_triangle:before{
    top:5px;
    border-left-color:#fff;
}
.marker_triangle_circle:before{
	top:7px;
	z-index:1;
    border-left-color:#333;
}
.marker_triangle_circle:after{
	top:5px;
    left:0;
	z-index:0;
	width:11px;
	height:11px;
	background:#fff;
	border-radius:100%;
}

.marker_disc{
	padding-left:21px;
}
.marker_disc:before{
	position:absolute;
	top:6px;
	left:3px;
	height:8px;
	width:8px;
	background:#5ab303;
	border-radius:50%;
	content:"";
}
.mark_line {
	padding: 0 8px;
	background: linear-gradient(transparent 60%, #FFD700 60%);
}


/* Footer
----------------------------------------------------------------------*/
#footer{
	position:relative;
	line-height:1.2;
	background:#333;
	padding: 0 10px;
}
#footer a{
	color:#fff;
	text-decoration:none;
}
#f_wrap{
	padding-top:24px;
	overflow:hidden;
}
.f_link_box{
	margin-bottom:24px;
	overflow:hidden;
}
.f_link_head{
	margin-left:16px;
	font-size:14px;
}
.f_link_head .marker_triangle_circle:before{
	top:6px;
}
.f_link_head .marker_triangle_circle:after{
	top:4px;
}
.f_link{
	font-size:12px;
}
.f_link li{
	float:left;
	margin:16px 0 0 16px;
}

.f_mark{
	float:right;
	margin:0 16px 16px 0;
}
.f_mark li{
	display:inline-block;
	vertical-align:bottom;
}
.f_mark li:not(:first-child){
	margin-left:4px;
}
.f_mark li a{
	display:block;
	height:50px;
	padding:2px;
	background:#fff;
	border-radius:5px;
}
.isms img{
	width:65px;
}
.privacymark a{
	width:50px;
}

.copyright{
	clear: both;
	display: block;
	height:50px;
	line-height:50px;
	text-align:center;
	color:#fff;
	border-top: 1px solid #fff;
	font-size:1.2rem;
}

/* btnTop
----------------------------------------------------------------------*/
#btnTop{
	position: fixed;
	bottom: 10px;
	right: 10px;
}
#btnTop a{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50px;
	height: 50px;
	color: #fff;
	font-weight: bold;
	font-size: 24px;
	line-height: 1;
	background: #fff;
	border-radius: 50%;
	box-shadow: 3px 3px 10px rgba(0,0,0,.2);
}
#btnTop a:after{
    display:block;
    position:absolute;
    top:8px;
    right:0;
	bottom:0;
	left:0;
    width:16px;
    height:16px;
	margin:auto;
    border-top:solid 4px  var(--color-primary);
    border-right:solid 4px  var(--color-primary);
			transform:rotate(-45deg);
    content:"";
}


/* a
----------------------------------------------------------------------*/
.a_blank{
	position:relative;
	padding-right:18px;
}
.a_blank:before,
.a_blank:after{
    position:absolute;
	width:12px;
	height:12px;
	background:#5ab303;
	border:2px solid #fff;
    content:"";
}
.a_blank:before{
	top:7px;
	right:2px;
}
.a_blank:after{
	top:3px;
	right:-2px;
}

.btn:not(.btn_ghost) .a_blank:before,
#footer .a_blank:before,
.btn:not(.btn_ghost) .a_blank:after,
#footer .a_blank:after{
	background:#fff;
}

.btn .a_blank{
	display:inline-block;
	padding-right:16px;
}
.btn .a_blank:before,
.btn .a_blank:after{
	top:50%;
}
.btn:not(.btn_ghost) .a_blank:before,
.btn:not(.btn_ghost) .a_blank:after{
	border-color:#5ab303;
}
.btn .a_blank:before{
	margin-top:-6px;
}
.btn .a_blank:after{
	margin-top:-10px;
}

.btn_large .a_blank{
	padding-right:22px;
}
.btn_large .a_blank:before,
.btn_large .a_blank:after{
	width:16px;
	height:16px;
}
.btn_large .a_blank:before{
	margin-top:-8px;
}
.btn_large .a_blank:after{
	margin-top:-12px;
}

#footer .a_blank:before,
#footer .a_blank:after{
	background:#fff;
	border-color:#333;
}
#footer .a_blank:before{
	top:4px;
	right:4px;
}
#footer .a_blank:after{
	top:0;
	right:0;
}

/* anime
----------------------------------------------------------------------*/
.anime_slide_up,
.anime_fade_in,
.anime_flow::before{
	visibility: hidden;
	opacity : 0;
}
.anime_fade_in{
	transition: opacity .4s ease-in;
}
.anime_slide_up {
	transform: translateY(50px);
	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1), opacity .4s ease-out;
}
.anime_flow::before{
	transition: opacity .4s ease-in;
}
.anime_flow:not(:last-child)::after{
	transform: scale(1, 0);
	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1), opacity .4s ease-out;
	transition-delay: .4s;
}

.is-anime,
.is-anime::after,
.is-anime::before{
	visibility: visible;
	opacity: 1;
}
.anime_slide_up.is-anime{
	transform: translate(0);
}
.anime_flow.is-anime:not(:last-child)::after{
	transform: scale(1, 1);
	transform-origin: top;
}

/* utility
***********************************************************************/
.u-fw-b{
	font-weight: bold;
}
.u-fz-12{
	font-size: 1.2rem;
}
.u-fz-1_75em{
	font-size: 1.75em;
	line-height: 1;
}
.u-fz-0_75em{
	font-size: .75em;
}
.u-ta-c{
	text-align: center;
}
.u-ta-c.is-pc{
	text-align: left;
}
.u-mt-20{
	margin-top: 20px;
}
.u-mt-30{
	margin-top: 30px;
}
.u-ws-nw{
	white-space: nowrap;
}
.u-d-ib{
	display: inline-block;
}
.u-col-primary{
	color: var(--color-primary);
}
.is-fixed{
	position: fixed;
}
br.is-pc{
	display: none;
}


/*=====================================================================
   769 start
======================================================================*/
@media screen and ( min-width:769px ){

/* a
***********************************************************************/
[href^="tel:"]{
	pointer-events: none;
}
main a:not([class]):hover{
	text-decoration: none;
}
.btn_m,
.btn_l{
	transition: opacity .2s;
}
.btn_m:hover,
.btn_l:hover{
	opacity: .7;
}
.btn_l{
	font-size: 1.8rem;
}

/* header
***********************************************************************/
.header_inner{
	display: flex;
	align-items: center;
	height: 70px;
}
#gnav li a{
	transition: opacity .2s;
}
#gnav li a:hover{
	opacity: .7;
}
#hamburger_menu{
	width: 70px;
	height: 70px;
}
header .btn_area{
	padding-right: 70px;
	height: 70px;
}
.btn_header{
	font-size: 2rem;
	width: auto;
}
.btn_header img{
	width: 22px;
}
.btn_header.btn_navy{
	transition: background .2s;
}
.btn_header.btn_navy:hover{
	background: #2C67A1;
}
#gnav.is-fixed{
	top: 70px;
}

/* mv
----------------------------------------------------------------------*/
.mv{
	min-height: 430px;
	padding-top: 70px;
	background-position: center;
}
.mv_grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(380px, auto));
	grid-template-rows: repeat(2, auto);
	gap: 0 30px;
	align-items: flex-end;
}
.mv_grid > *:first-child{
	grid-area: 1 / 1 / 2 / 2;
}
.mv_grid > .btn_area {
	grid-area: 2 / 1 / 3 / 2;
}
.mv_grid > figure{
	grid-area: 1 / 2 / 3 / 3;
}
.mv .balloon_wrap{
	text-align: left;
}
.mv .balloon::before{
	left: 20px;
	right: auto;
}
.mv_ttl{
	font-size: 3.4rem;
	text-align: left;
}
.mv_price_wrap{
	text-align: left;
}
.mv .btn_area{
	display: flex;
	width: 100%;
}

/* main
----------------------------------------------------------------------*/
.sec_ttl{
	font-size: 3rem;
}
.sec_ttl + .txt_area{
	text-align: center;
}

/*media*/
.media{
	display: flex;
	gap: 20px;
}
.media_rev{
	display: flex;
	flex-direction: row-reverse;
	gap: 20px;
}
:is(.media, .media_rev) > *{
	flex: 1;
}

/*banner*/
.banner{
	transition: opacity .2s;
}
.banner:hover{
	opacity: .7;
}
.banner img.is-pc{
	display: inline-block;
}
.banner img.is-sp{
	display: none;
}

/*lightbox*/
[rel="lightbox"]{
	display: inline-block;
	position: relative;
	border: 1px solid #ccc;
	pointer-events: all;
}
[rel="lightbox"]::before,
[rel="lightbox"]::after{
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	width: 50px;
	height: 50px;
}
[rel="lightbox"]::before{
	border: 25px solid transparent;
	border-right-color: var(--color-accent);
	border-bottom-color: var(--color-accent);
}
[rel="lightbox"]::after{
	background: url("../images/icon_zoom.svg") 25px 25px / 19px auto no-repeat;
}

/*card*/
.card_wrap .card,
.item_wrap .card{
	position: relative;
	width: calc(33.3% - 20px);
}
.card_wrap .card.media{
	flex-direction: row;
}
.card .btn_area{
	display: block;
}
.card .btn_m::before{
	content: "";
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}
.card > .txt_area{
	margin-bottom: auto;
}
.card_border .ttl{
	display: flex;
	justify-content: center;
	align-items: center;
}
.card_border .ttl.img_box{
	height: 100%;
}

/*grid*/
.grid:is(.item2){
	max-width: 800px;
	margin: 0 auto;
	grid-template-columns: 1fr 1fr;
}
.grid:is(.item3){
	max-width: 800px;
	margin: 0 auto;
	grid-template-columns: 1fr 1fr 1fr;
}

/*merit*/
.merit_content{
	margin-top: 100px !important;
}

/*voice*/
.list_voice{
	margin-top: 60px;
}
.list_voice > li:nth-child(odd){
	margin: 0;
}
.list_voice > li:nth-child(3){
	margin-right: 70px;
}
.list_voice > li:nth-child(7){
	margin-right: 40px;
}

/*list_item_fn*/
.list_item_fn{
	margin-left: auto;
	margin-right: auto;
}
.list_item_fn li{
	width: calc(25% - 20px);
	transition: background .2s;
}
.list_item_fn li:hover{
	background: #E4F3D7;
}
.list_item_fn li a::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: auto;
	background: transparent;
}
.list_item_fn li.icon_op{
	padding-top: 5px;
}
.list_item_fn li.icon_op::before{
	width: auto;
	top: 6px;
	left: -10px;
}

/*list_flow_num*/
.list_flow_num{
	padding-top: 0;
}
.list_flow_num li{
	display: flex;
	align-items: center;
	padding: 0;
	font-size: 2rem;
}
.list_flow_num li:not(:last-child)::after{
	font-size: 3rem;
}
.list_flow_num li::before{
	position: static;
	font-size: 3rem;
}
.list_flow_num li img{
	position: static;
	margin-right: 15px;
}

/*contact*/
.contact .sec_item{
	padding-bottom: 70px;
}
.contact .btn_area{
	margin-top: 20px;
}

/* Footer
----------------------------------------------------------------------*/
.hover #footer a:hover{
	opacity:.7;
}
#f_wrap{
	margin:auto;
	padding:32px 0 16px;
}
.f_link_box{
	float:left;
	width:200px;
}
.f_link_head{
	font-size:16px;
}
.f_link_head .marker_triangle_circle:before{
	top:7px;
}
.f_link_head .marker_triangle_circle:after{
	top:5px;
}
.f_link li{
	float:none;
}

.f_link_box.single,
.f_link_box.single .f_link{
	width:100%;
	overflow:hidden;
}
.f_link_box.single .f_link li{
	float:left;
}

.f_mark{
	position:absolute;
	right:0;
	bottom:74px;
}
.f_mark li a,
.isms img,
.privacymark a{
	width:auto;
	height:auto;
}

#f_wrap{
	padding-top:24px;
}
#btnTop a{
	transition: opacity .2s;
}
#btnTop a:hover{
	opacity: .7;
}

/* utility
----------------------------------------------------------------------*/
.u-ta-c.is-pc{
	text-align: center;
}
br.is-sp{
	display: none;
}
br.is-pc{
	display: block;
}

/*=====================================================================
   769 end
======================================================================*/
}


@media screen and ( min-width:1000px ){

/* a
***********************************************************************/


/* header
----------------------------------------------------------------------*/
.header_inner{
	display: flex;
	align-items: flex-end;
}
.h_item{
	display: flex;
	align-items: flex-end;
}
#gnav{
	display: flex!important;
	justify-content: flex-end;
	align-items: center;
	font-size: 1.4rem;
}
#gnav.is-fixed{
	position: static;
	background: transparent;
}
#gnav li{
	display: block;
	border-bottom: 0;
	border-left: 1px solid #ccc;
	margin-bottom: 10px;
	line-height: 1.5;
}
#gnav li:first-child{
	border-top: 0;
	border-left: 0;
}
#gnav li a{
	padding: 0 15px;
	width: auto;
	color: #252525;
}
header .btn_area{
	display: flex;
	padding-right: 0;
}
#hamburger_menu{
	display: none;
}
/*=====================================================================
   1000 end
======================================================================*/
}
