﻿@charset "utf-8";
/* Foundation
***********************************************************************/
:root{
	--color-text: #252525;
	--color-text-gray: #7e7f88;
	--color-text-gray-dark: #5f5f5f;
	--color-gray: #bbc3c7;
	--color-gray-light: #d8d8d8;
	--color-primary: #006baf;
	--color-primary-rgb: 0, 131, 212;
	--color-accent: #ce3c5c;
	--color-bg-primary-soft: #38549f;/*sectionなど広範囲の背景*/
	--color-bg-primary-pail: #e5f0f7;/*cardなどの背景*/
	--color-bg-primary-dark: #004978;/*gnav,footer*/
}
*,
:before,
:after{
	box-sizing:border-box;
}
html,
body{
	height: 100%;
}
html{
	position: relative;
	font-size: 62.5%;
}
body{
	color: var(--color-text);
	font-family:"Arial", "游ゴシック体", "Yu Gothic","游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "yu-gothic-pr6n", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
	font-weight: 400;
	font-size: 1.6rem;
	line-height: 1.8;
	letter-spacing: .02em;
	-webkit-text-size-adjust:100%;
}
figure{
	display: grid;
	justify-content: center;
}
img{
	max-width: 100%;
	vertical-align: middle;
}
:focus-visible{
	outline: 1px solid var(--color-primary);
}
sup{
	vertical-align: super;
	font-size: 1.2rem;
}

/* a
***********************************************************************/
a{
	color: var(--color-primary);
	cursor: pointer;
	text-decoration: none;
	word-break: break-all;
}
:is(main, .pagetop) a{
	text-decoration: underline;
}
figure a{
	display: inline-block;
}
section[class="u-bg-primary"] a:not(.btn){
	color: #fff;
}
[target="_blank"]::after,
[href$=".pdf"]::after{
	display: inline-block;
	margin-left: 4px;
}
[target="_blank"]::after{
	content: url(../images/icon_blank_wh.svg);
	vertical-align: baseline;
	height: 1em;
	aspect-ratio: 1;
}
main section:not([class="u-bg-primary"]) [target="_blank"]::after{
	content: url(../images/icon_blank_primary.svg);
}
[href$=".pdf"]::after{
	content: url(../images/icon_pdf.png) !important;
	padding: 2px 40px 0 0;
	width: auto !important;
	height: auto;
	aspect-ratio: auto;
	vertical-align: middle;
}
.btn_area{
	display: grid;
	place-content: center;
	gap: 15px;
	grid-template-columns: repeat(auto-fit, minmax(200px, auto));
	margin-top: 20px;
}
.sec_content > .btn_area:last-child{
	margin-top: 40px;
}
.btn{
	display: grid;
	align-items: center;
	grid-template-columns: 1fr auto 1fr;
	gap: 10px;
	border: 0;
	font-weight:bold;
	line-height: 1.5;
	padding: 10px 15px;
	border-radius: 5px;
	cursor: pointer;
	white-space: normal;
	text-decoration: none !important;
	transition: opacity .2s;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.btn::before{
	content: "";
}
.btn::after{
	content: "";
	display: inline-block;
	justify-self: end;
	width: 8px;
	height: 8px;
	border-right: 2px solid;
	border-top: 2px solid;
	transform: rotate(45deg);
}
.btn_s{
	width: auto;
	white-space: nowrap;
}
.btn_l{
	font-size: 2rem;
	padding: 10px 25px;
	min-width: 120px;
}
.btn_primary{
	color: #fff;
	background: var(--color-primary);
}
.btn_primary.btn_l{
	background: var(--color-bg-primary-soft);
}
.btn_primary_light{
	color: var(--color-primary);
	background: var(--color-bg-primary-light);
}
.btn_ghost{
	color: var(--color-primary);
	border: 1px solid;
}

.link{
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
	padding: 4px 0;
	margin-top: 20px;
	border-bottom: 1px solid var(--color-primary);
	text-decoration: none !important;
	color: var(--color-text);
	font-weight: bold;
}
.link::after{
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	margin-left: 10px;
	background: url(../images/arrow.svg) center / contain no-repeat;
}


/* layout
----------------------------------------------------------------------*/
.layout{
	padding: 0 20px;
	margin: 0 auto;
	width: 100%;
}

/* gnav
***********************************************************************/
header{
	position: fixed;
	inset: 0 auto auto 0;
	width: 100%;
	height: 50px;
	z-index: 1000;
	transition: transform .2s;
}
header::before{
	content: "";
	position: absolute;
	inset: 50px auto auto 0;
	width: 100%;
	height: 1px;
	background: var(--color-gray-light);
}
header.is-hidden{
	transform: translateY(-100%);
}
nav{
	background: #fff;
}
nav > .layout{
	position: fixed;
	height: 50px;
	padding: 0;
}
.gnav_wrap, .gnav_info{
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s;
}
.gnav_wrap{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 80px 20px 50px;
	background: var(--color-bg-primary-dark);
	overflow-y: auto;
}
header.is-active :is(.gnav_wrap, .gnav_info){
	visibility: visible;
	opacity: 1;
}
nav > .layout,
header.is-active .logo_wrap{
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
}
nav > .layout{
	padding: 0;
}
.logo_wrap{
	position: relative;
	padding: 10px 20px;
	width: 100%;
	height: 50px;
	background: #fff;
	z-index: 1000;
	flex: none;
}
.logo a{
	display: inline-block;
}
.logo img{
	height: 20px;
}
.gnav{
	display: flex;
	flex-direction: column;
	gap: 20px 0;
	height: 100%;
}
.gnav > li:last-child{
	margin-top: auto;
}
.gnav a{
	color: #fff;
	font-size: 2rem;
	font-weight: bold;
}
.gnav .acc{
	position: static;
	background: transparent;
	border: 0;
}
.gnav_ttl{
	justify-content: space-between;
	color: #fff;
	font-size: 2.2rem;
}
.gnav .acc_ttl{
	padding: 0;
}
.gnav .acc_ttl::after{
	border-color: currentColor;
}
.gnav .acc_ttl a{
	pointer-events: none;
}
.gnav .acc_content > .layout{
	display: grid;
	gap: 15px 30px;
	padding: 0;
	margin: 15px 0 40px;
}
.acc_content_ttl{
	display: none;
}
.acc_content_nav{
	display: grid;
	gap: 15px 0;
}
.gnav .acc_content a{
	color: rgba(255,255,255,.7);
	font-size: 1.6rem;
}

/*lang*/
.lang{
	display: flex;
	margin-left: auto;
}
.lang > li{
	flex: none;
}
.lang > li > a{
	padding: 8px;
	background: var(--color-bg-primary-pail);
	color: var(--color-primary);
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 1;
}
.lang > li:first-child > a{
	border-radius: 50% 0 0 50%;
	padding-left: 10px;
}
.lang > li:last-child > a{
	border-radius: 0 50% 50% 0;
	padding-right: 10px;
}
.lang > li.is-active > a{
	color: #fff;
	background: var(--color-primary);
	pointer-events: none;
}


/*hamburger_menu*/
#hamburger_menu{
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 10px;
	margin: auto 0;
	width: 50px;
	height: 50px;
	cursor: pointer;
	z-index: 100;
}
#hamburger_menu span{
	display: block;
	position: relative;
	width: 30px;
	height: 3px;
	background: var(--color-primary);
}
#hamburger_menu span::before,
#hamburger_menu span::after{
	content: "";
	position: absolute;
	left: 0;
	width: inherit;
	height: inherit;
	background: var(--color-primary);
	transition: transform .2s;
}
#hamburger_menu span::before{
	top: -8px;
}
#hamburger_menu span::after{
	top: 8px;
}
header.is-active #hamburger_menu span{
	background: transparent;
	z-index: 100;
}
header.is-active #hamburger_menu span::before,
header.is-active #hamburger_menu span::after{
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	background: var(--color-primary);
}
header.is-active #hamburger_menu span::before{
	transform: rotate(45deg);
}
header.is-active #hamburger_menu span::after{
	transform: rotate(135deg);
}

/* mv
----------------------------------------------------------------------*/
header + *{
	margin-top: 50px !important;
}
.mv_ttl{
	margin: 30px 0;
	font-size: 3rem;
	font-weight: bold;
	text-align: center;
}
.mv_txt{
	margin: 60px 0 100px;
}
.mv_img{
	width: 100%;
	height: 130px;
	margin-top: 30px;
	background: center / cover no-repeat;
	animation: fade_in 1s .2s ease-out forwards;
	opacity: 0;
}
@keyframes fade_in{
	100%{
		opacity: 1;
	}
}

.press .mv_img{
	background-image: url(../images/press_mv_img.webp);
}
.service .mv_img{
	background-image: url(../images/service_mv_img.webp);
}

/* main
----------------------------------------------------------------------*/
section{
	padding: 50px 0;
}
section:first-child{
	margin-top: 35px;
}
section:first-child:not([class*="u-bg-"]){
	padding-top: 0;
}
.sec_ttl{
	padding-top: 20px;
	margin-bottom: 20px;
	font-size: 2.8rem;
	font-weight: bold;
	line-height: 1.5;
	text-align: center;
}
section > .txt_area{
	margin: -10px auto 40px;
}
.txt_area > p + p{
	margin-top: 1em;
}
.txt_area.u-ta-c{
	text-align: left;
}
.item_ttl{
	margin-bottom: 4px;
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.5;
}
h3.item_ttl{
	border-bottom: 2px solid var(--color-gray);
}
.item_ttl + :is(.media, .table_wrap){
	margin-top: 15px;
}
.item_ttl + .txt_area{
	margin-top: 10px;
}
* + .item_ttl,
.txt_area + .sec_content > .item_ttl:first-child{
	margin-top: 60px;
}

/*icon*/
.icon_circle{
	display: flex;
	gap: 4px;
	align-items: start;
}
.icon_circle::before{
	content: "";
	display: inline-block;
	position: relative;
	top: .5em;
	width: .5em;
	aspect-ratio: 1;
	background: var(--color-primary);
	border-radius: 50%;
	flex: none;
}

/*icon_wrap*/
.icon_wrap{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	line-height: 1;
}
.icon_wrap.nowrap{
	flex-wrap: nowrap;
}
.icon_wrap.u-b-gray-light{
	justify-content: center;
	background: #fff;
}
.media_img.icon_wrap{
	justify-content: center;
}
.icon_wrap.item3{
	display: grid;
	grid-template-columns: repeat(3, auto);
}

/*breadcrumb*/
.breadcrumb{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 2px 15px;
	padding-top: 10px;
}
.breadcrumb a{
	color: var(--color-text);
	text-decoration: underline;
}
.breadcrumb > li{
	color: var(--color-text-gray);
}
.breadcrumb li:not(:last-child)::after{
	content: "";
	display: inline-block;
	position: relative;
	left: 7px;
	width: 8px;
	height: 8px;
	border-right: 1px solid var(--color-text-gray);
	border-bottom: 1px solid var(--color-text-gray);
	transform: rotate(-45deg);
	flex: none;
}

/*pagelink*/
.pagelink_col{
	gap: 6px !important;
	display: flex !important;
	justify-content: center;
	flex-wrap: wrap;
	padding: 0 20px;
}
.pagelink_col > div{
	width: 100%;
	max-width: 600px;
}
.pagelink_col .pagelink_col{
	width: 100%;
	flex-wrap: wrap;
	padding: 0;
}
.pagelink{
	display: grid;
	flex-wrap: wrap;
	gap: 10px 30px;
}
.pagelink a{
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	color: var(--color-text);
	font-weight: bold;
	text-decoration: none;
}
.pagelink a::before{
	content: "";
	display: inline-block;
	position: relative;
	top: 2px;
	width: 16px;
	height: 16px;
	border: 1px solid var(--color-primary);
	border-radius: 50%;
	background: url(../images/arrow.svg)center / contain no-repeat;
	transform: rotate(90deg);
	flex: none;
}


/*acc*/
.acc{
	position: relative;
	background: #fff;
	border-radius: 5px;
}
.acc > input[type="checkbox"]{
	display: none;
}
.acc_ttl{
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 10px;
	font-weight: bold;
	border-radius: 5px;
	cursor: pointer;
}
.acc_ttl::after{
	content: "";
	display: inline-block;
	position: relative;
	top: 2px;
	width: .4em;
	height: .4em;
	border-right: 1px solid var(--color-primary);
	border-bottom: 1px solid var(--color-primary);
	transform: rotate(-135deg);
	flex: none;
}
.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::after{
	top: -2px;
	transform: rotate(45deg);
}
input:checked ~ .acc_content{
	height: auto;
	opacity: 1;
	visibility: visible;
}

/*faq*/
.faq > li + li{
	margin-top: 4px;
}
.faq .acc_ttl{
	justify-content: start;
	background: rgba(var(--color-primary-rgb), .15);
}
.faq .acc_ttl::before{
	display: inline-grid;
	place-content: center;
	width: 1.5em;
	height: 1.5em;
	background: var(--color-primary);
	color: #fff;
	font-weight: bold;
	border-radius: 50%;
}
.faq .acc_ttl::before{
	content: "Q";
}
.faq .acc_ttl::after{
	margin-left: auto;
}
/* input:checked ~ .acc_content{
	padding: 6px 10px 20px;
} */

/*label*/
.label_wrap{
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
}
.label{
	display: inline-block;
	padding: 2px 6px;
	border-radius: 5px;
	font-size: 1.4rem;
	line-height: 1.5;
	vertical-align: text-bottom;
}

/*card*/
.card{
	padding: 20px;
	border-radius: 5px;
	background: #fff;
}
.sec_card{
	padding: 50px 20px;
}
section:not(:first-child) .sec_card{
	margin: -60px auto;
}

/*media*/
.media,
.media_rev{
	display: flex;
	flex-direction: column;
	gap: 20px 30px;
	align-items: start;
}
.media + .media{
	margin-top: 60px;
}
.media.item2,
.media.item3{
	display: grid;
}
.media.item3{
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.media_txt{
	flex: 1;
}
.media_img{
	margin: 0 auto;
}

/*grid*/
.grid{
	display: grid;
	gap: 60px 30px;
}
.grid .item_ttl{
	margin-top: 30px;
	border-bottom: 0;
}
.grid.item4{
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.grid.item5{
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.subgrid{
	display: grid;
	gap: 20px;
	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;
}

/*numbering*/
.numbering{
	counter-reset: numbering;
}
.numbering_ttl::before{
	content: counter(numbering) ". ";
	counter-increment: numbering;
}

/*list*/
.list_disc > li{
	position: relative;
	padding-left: 16px;
}
.list_disc > li::before{
	content: "";
	position: absolute;
	top: calc(0.85em - 2px);
	left: 0;
	width: 4px;
	height: 4px;
	background: currentColor;
	border-radius: 50%;
}
:is(.list_rice, .list_rice_num) > li{
	position: relative;
}
.list_rice > li{
	padding-left: 1em;
}
:is(.list_rice, .list_rice_num) > li::before{
	position: absolute;
	inset: 0 auto auto 0;
}
.list_rice > li::before{
	content: "※";
}
.list_rice_num,
.list_rice_num_wrap{
	counter-reset: list_rice_num;
}
.list_rice_num_wrap .list_rice_num{
	counter-reset: none;
}
.list_rice_num > li{
	padding-left: 2.5em;
}
.list_rice_num > li::before{
	content: "※" counter(list_rice_num);
	counter-increment: list_rice_num;
}
.list_num,
.list_num_bracket{
	counter-reset: list_num;
}
.list_num > li,
.list_num_bracket > li{
	position: relative;
	padding-left: 1.5em;
}
.list_num > li::before,
.list_num_bracket > li::before{
	counter-increment: list_num;
	position: absolute;
	inset: 0 auto auto 0;
	color: var(--color-text-gray);
	font-weight: bold;
}
.list_num > li::before{
	content: counter(list_num) ".";
}
.list_num_bracket > li::before{
	content: "(" counter(list_num) ")";
}

/*dl_table_wrap*/
:is(.dl_table_wrap, .dl_grid_wrap){
	display: grid;
}
dt{
	font-weight: bold;
}
.dl_table_wrap > dl > :is(dt, dd){
	padding: 10px 15px;
}
.dl_table_wrap > dl > dt{
	background: #eee;
}
.dl_table_wrap .dl_table_wrap{
	gap: 1em 20px;
}
.dl_table_wrap .dl_table_wrap > dl > :is(dt, dd){
	padding: 0;
}
.dl_table_wrap .dl_table_wrap > dl > dt{
	background: transparent;
}
.item_ttl + .dl_table_wrap{
	margin-top: 10px;
}
.dl_table_line{
	border-top: 1px solid var(--color-gray) !important;
	padding-top: 1em;
}

/*table*/
.taxin::before{
	content: "（税込）";
	display: block;
	font-size: 1.2rem;
	text-align: right;
}
.table_wrap:not(.scroll_x) :is(table, tbody, tr, th, td){
	display: block;
}
table{
	width: 100%;
}
.table_wrap:not(.scroll_x) thead{
	display: none;
}
tbody{
	background: #fff;
}
tr + tr{
	margin-top: -1px;
}
thead + tbody tr + tr{
	margin-top: 10px;
}
th,td{
	border:1px solid var(--color-gray);
	padding: 4px 10px;
	vertical-align: middle;
}
th,
table [data-label]::before{
	background: #eee;
	line-height: 1.5;
	text-align: left;
}
.subhead{
	background: #edf1f7;
}
.table_wrap:not(.scroll_x) .subhead{
	display: none;
}
table td{
	margin-top: -1px;
}
table [data-label]::before{
	content: attr(data-label);
	display: block;
	padding: 2px 10px;
	margin: -4px -10px 4px;
	border-bottom: 1px solid var(--color-gray);
}
table .subhead + [data-label]{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
}
table .subhead + [data-label]::before{
	content: attr(data-label) "：";
	display: inline;
	padding: 0;
	margin: 0;
	border-bottom: 0;
	background: transparent;
}
.table_wrap.scroll_x thead th{
	vertical-align: middle;
	text-align: center;
}
.scroll_x.sticky tr :first-child{
	position: sticky;
	inset: 0 auto auto 0;
}
.scroll_x.sticky tr :first-child::before{
	content: "";
	position: absolute;
	inset: 0 auto auto -1px;
	width: calc(100% + 2px);
	height: 100%;
	border-right: 1px solid var(--color-gray);
	border-left: 1px solid var(--color-gray);
}

/*scroll*/
.scroll_y{
	overflow-y: auto;
	max-height: 250px;
}
.scroll_x{
	overflow-x: auto;
	white-space: nowrap;
}
.scroll_x *{
	white-space: nowrap;
}
.is-scrollable{
	padding-top: 35px;
}
.scroll_x dl:not(.dl_table_ttl) :is(dt, dd){
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.scroll-hint-icon-wrap{
	top: 0;
	opacity: 1 !important;
}
.scroll-hint-icon {
	top: 0;
	left: 0;
	padding: 4px 10px 2px;
	width: auto;
}
.scroll-hint-icon:before,
.scroll-hint-icon:after{
	content: none;
}
.scroll-hint-text {
	font-size: 1.4rem;
}

/*gmap*/
.gmap{
	line-height: 0;
	margin-top: 30px;
}
.gmap iframe{
	aspect-ratio: 16 / 6;
	width: 100%;
	height: auto;
	min-height: 300px;
	border: 0;
}

/*sec_list_num*/
.sec_list_num{
	counter-reset: sec_list_num;
}
.sec_list_num > li{
	position: relative;
	padding-left: 4rem;
}
.sec_list_num > li::before{
	content: counter(sec_list_num);
	counter-increment: sec_list_num;
	position: absolute;
	inset: 0 auto auto 0;
	color: var(--color-primary);
	font-size: 4rem;
	font-weight: bold;
	line-height: 1;
}
.sec_list_num > li + li{
	margin-top: 1em;
}

/*sec_flow*/
.sec_flow > li{
	position: relative;
	gap: 10px 30px;
	padding-left: calc(3rem + 6px);
}
.sec_flow .media_txt::before{
	content: counter(numbering);
	counter-increment: numbering;
	display: inline-grid;
	place-content: center;
	position: absolute;
	inset: 0 auto auto 0;
	background: var(--color-primary);
	width: 3rem;
	height: 3rem;
	margin: 0 6px 4px 0;
	border-radius: 50%;
	color: #fff;
	font-size: 2.2rem;
	font-weight: bold;
	line-height: 1;
}
.sec_flow > li + li{
	margin-top: 60px;
}
.sec_flow .media_txt{
	flex: 1;
}
.sec_flow .media_img{
	text-align: center;
}

/*list_flow*/
.list_flow{
	--gap: 18px;
	position: relative;
	display: grid;
	justify-content: center;
	gap: var(--gap);
	counter-reset: list_flow;
	font-weight: bold;
	z-index: 0;
}
.list_flow > li{
	position: relative;
	display: grid;
	grid-template-columns: subgrid;
	grid-auto-flow: row;
	grid-column: span 3;
	gap: 10px;
	padding-left: 50px;
}
.list_flow > li::after{
	content: "";
	position: absolute;
	top: 0;
	left: 18px;
	width: 4px;
	height: calc(100% + var(--gap));
	font-size: 2rem;
	background: var(--color-primary);
	z-index: -1;
}
.list_flow > li:last-child::after{
	height: 0;
}
.list_flow > li::before{
	content: counter(list_flow);
	counter-increment: list_flow;
	display: grid;
	place-content: center;
	position: absolute;
	inset: 0 auto auto 0;
	width: 40px;
	height: 40px;
	color: #fff;
	font-size: 2rem;
	background: var(--color-primary);
	border-radius: 50%;
	flex: none;
}
.list_flow .media_txt{
	display: flex;
	align-items: center;
}
.list_flow_l{
	--gap: 60px;
}
.list_flow_l > li{
	display: block;
	padding-left: 60px;
}
.list_flow_l figure{
	justify-content: start;
	margin-bottom: 20px;
}
.list_flow_l > li > div{
	font-size: 1.6rem;
	font-weight: normal;
}
.list_flow_l .btn_area{
	justify-content: start;
}

/*news*/
.news > li{
	position: relative;
	padding: 15px 0;
	border-top: 1px solid var(--color-gray);
}
.news > li:last-child{
	border-bottom: 1px solid var(--color-gray);
}
.news > .sub{
	padding-left: 14px;
}
.news > .sub::before{
	content: "";
	position: absolute;
	inset: calc(15px + .4em) auto auto 0;
	width: 10px;
	height: 10px;
	border-left: 1px solid #888;
	border-bottom: 1px solid #888;
}
.news a{
	display: block;
	color: var(--color-text);
}

/*box_link_list*/
.box_link_list{
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fit,minmax(250px, 1fr));
}
.box_link_list > li{
	position: relative;
	border: 1px solid var(--color-primary);
	padding: 115px 15px 15px;
}
.box_link_list > li::before{
	content: "";
	position: absolute;
	inset: 0 auto auto 0;
	width: 100%;
	height: 100px;
	background: center / cover no-repeat;
}
.box_link_list_ttl{
	margin-bottom: 6px;
	font-weight: bold;
}
.box_link_list a{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--color-text);
	text-decoration: none;
}
.box_link_list a::after{
	content: "";
	display: inline-block;
	width: 1em;
	aspect-ratio: 1;
	background: url(../images/arrow.svg) center / contain no-repeat;
	flex: none;
}
a.box_link_list_ttl::before{
	content: "";
	position: absolute;
	inset: 0;
}
a.box_link_list_ttl::after{
	width: 30px;
	aspect-ratio: 1;
}

/*js-tab*/
.js-tab-item{
	transition: opacity .6s;
}

/*tab_page*/
.tab_page{
	display: grid;
	gap: 6px;
	margin-top: 30px;
}
.tab_page a{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 6px;
	padding: 10px;
	border: 2px solid var(--color-primary);
	border-radius: 5px;
	text-decoration: none;
	font-weight: bold;
}
.tab_page a::after{
	content: "";
	display: inline-block;
	width: 1em;
	aspect-ratio: 1;
	background: url(../images/arrow.svg) center / contain no-repeat;
	flex: none;
	transform: rotate(90deg);
}
.tab_page .is-active a{
	background: var(--color-bg-primary-pail);
	pointer-events: none;
}

/*sec_link*/
.sec_link{
	display: grid;
	gap: 30px;
}
.sec_link + .sec_link{
	margin-top: 60px;
}
.sec_link_bg{
	display: block;
	position: relative;
	height: 120px;
	width: calc(100% + 40px);
	margin: 0 -20px;
}
.sec_link_bg img{
	object-fit: cover;
	height: 120px;
	width: 100%;
}
.sec_link_list ul{
	display: grid;
	gap: 15px 20px;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.sec_link_list a{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 4px 0;
	height: 100%;
	border-bottom: 1px solid var(--color-primary);
	text-decoration: none;
	color: var(--color-text);
	font-weight: bold;
}
.sec_link_list a::after{
	content: "";
	display: block;
	width: 30px;
	height: 30px;
	margin-left: 10px;
	background: url(../images/arrow.svg) center right / contain no-repeat;
}

/*control*/
.control_wrap{
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
}
.select_page{
	text-align: center;
	margin-bottom: 30px;
}
.select_wrap{
	position: relative;
	display: inline-block;
}
.select_wrap::before{
	content: "";
	position: absolute;
	inset: 0 12px 4px auto;
	margin: auto 0;
	width: 8px;
	height: 8px;
	border-top: 2px solid var(--color-text);
	border-right: 2px solid var(--color-text);
	transform: rotate(135deg);
}
input,
select,
textarea{
	padding: 6px;
	min-width: 50px;
	border: 1px solid #ccc;
	border-radius: 5px;
	background: #fff;
	color: var(--color-text);
	font-size: 1.6rem;
}
input,
.select_wrap select,
textarea{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.en-list{
	text-align:right;
}
.en-list a::after{
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	background: url(../images/arrow.svg) center / contain no-repeat;
	margin-left:.3em;
}


/* Footer
----------------------------------------------------------------------*/
footer,
footer a{
	color: #fff;
}
footer{
	position: sticky;
	top: 100vh;
	top: 100dvh;
	padding-top: 40px;
	padding-bottom: 90px;
	margin-top: 60px;
	background: var(--color-bg-primary-dark);
}
.fnav{
	display: grid;
	gap: 10px 30px;
	margin-top: 30px;
}
.fnav_head{
	font-weight: bold;
}
.fnav li:not(.fnav_head){
	display: none;
}
.fnav_mark_wrap{
	margin-top: 30px;
}
.fnav_mark{
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.fnav_mark > li{
	padding: 6px;
	background: #fff;
	border-radius: 5px;
}
.fnav_mark img{
	max-height: 40px;
}
.fnav_mark a::after{
	content: none;
}
.fnav_sub{
	padding: 8px 0;
	margin-top: 10px;
	border-top: 1px solid;
	border-bottom: 1px solid;
	font-size: 1.4rem;
}
small{
	display: block;
	padding: 10px 20px;
	font-size: 1.2rem;
	text-align: center;
}

/* btn_top
----------------------------------------------------------------------*/
#btn_top{
	display: grid;
	place-content: center;
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 10px rgba(39, 70, 184,.2);
	opacity: 0;
	visibility: hidden;
	z-index: 99;
	transition: opacity .2s;
	cursor: pointer;
}
#btn_top::before{
	content: "";
	display: block;
	position: relative;
	top: 2px;
	width: 10px;
	height: 10px;
	border-left: 2px solid var(--color-primary);
	border-top: 2px solid var(--color-primary);
	transform: rotate(45deg);
}
#btn_top.is-active{
	opacity: 1;
	visibility: visible;
}

/* cookie
***********************************************************************/
.c-cookie__box {
  display: flex;
  z-index: 100;
  position: fixed;
  bottom: 0;
  left: 0;
  justify-content: center;
  width: 100%;
  padding: 20px 40px;
  background: rgba(0, 0, 0, 0.8);
}
.c-cookie__box .c-container.en {
  display: none;
}
.c-cookie__box .c-container {
 display: grid;
 gap: 15px 40px;
}
.c-cookie__text {
  color: #fff;
  font-size: 1.3rem;
  line-height: 1.75;
}
.c-cookie__btn {
  display: flex;
	justify-content: center;
}
.c-cookie__btn--consent a,
.c-cookie__btn--detail a {
  display: block;
  padding: 10px;
  background-color: #ababab;
	border-radius: 5px;
  color: #fff;
  font-size: 1.3rem;
  transition: 0.2s ease;
}
.c-cookie__btn--consent a:hover,
.c-cookie__btn--detail a:hover {
  opacity: 0.7;
}
.c-cookie__btn--consent {
  margin: 0 25px 0 0;
}
.c-cookie__btn--consent a {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 145px;
  height: 48px;
  background-color: #fff;
  color: #323030;
  text-decoration: none;
}
.c-cookie__btn--detail a {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 145px;
  height: 48px;
  border: 1px solid #fff;
  background-color: transparent;
  color: #fff;
  text-decoration: none;
}

/* anime
***********************************************************************/
@keyframes fade_in{
	100%{
		opacity: 1;
	}
}
@keyframes arrow{
	0%{
		opacity: 0;
		left: -10px;
	}
	100%{
		left: 0;
	}
}
.anime_fade_in{
	opacity : 0;
}
.anime_fade_in{
	transition: opacity .4s ease-in;
}
.anime_bg{
	position: relative;
}
.anime_bg::after{
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: var(--color-primary);
	transition: width .6s .025s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.anime_bg.sec_link_bg::after{
	width: calc(100% + 40px);
	right: 0;
}

.is-anime,
.is-anime::after,
.is-anime::before{
	opacity: 1;
}
.anime_bg.is-anime::after{
		width: 0 !important;
}

/* utility
***********************************************************************/
.u-fw-b{
	font-weight: bold;
}
.u-fz-12{
	font-size: 1.2rem;
}
.u-fz-14{
	font-size: 1.4rem;
}
.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-r{
	text-align: right;
}
.u-ta-l{
	text-align: left !important;
}
.u-ai-base{
	align-items: baseline !important;
}
.u-ai-s{
	align-items: start !important;
}
.u-mx-auto{
	margin-right: auto;
	margin-left: auto;
}
.u-w-fit{
	width: fit-content;
}
.u-mt-10{
	margin-top: 10px !important;
}
.u-mt-20{
	margin-top: 20px !important;
}
.u-mt-30{
	margin-top: 30px !important;
}
.u-mt-60{
	margin-top: 60px !important;
}
.u-gap-8{
	gap: 8px !important;
}
.u-jc-c{
	justify-content: center;
}
.u-jc-s{
	justify-content: start;
}
.u-col-primary{
	color: var(--color-primary);
}
.u-col-accent{
	color: var(--color-accent);
}
.u-bg-primary{
	background: var(--color-bg-primary-soft);
	color: #fff;
}
.u-bg-primary-rgba15{
	background: rgba(var(--color-primary-rgb), .15);
}
.u-bg-primary-pail{
	background: var(--color-bg-primary-pail);
}
.u-bg-gray-light{
	background: var(--color-gray-light);
}
.u-b-gray-light{
	padding: 10px;
	border: 1px solid var(--color-gray-light);
}
img.u-b-gray-light{
	padding: 0;
}
.is-hidden{
	opacity: 0;
	visibility: hidden;
	height: 0 !important;
}
.is-fixed{
	position: fixed;
}
br.is-pc{
	display: none;
}


/*=====================================================================
   769 start
======================================================================*/
@media screen and ( min-width:769px ){

/* a
***********************************************************************/
a:hover{
	text-decoration: none;
}
[href^="tel:"]{
	color: var(--color-text);
	text-decoration: none !important;
	pointer-events: none;
}
.btn{
	transition: background .2s;
}
.btn::after{
	position: relative;
	right: 0;
	transition: right .2s;
}
.btn:hover::after{
	right: -4px;
}
:is(.btn_primary, .btn_primary_light):not(.btn_gnav):hover{
	background: #fff;
	outline: 1px solid;
	color: var(--color-primary);
}
.btn_ghost:hover{
	background: #fff;
	color: var(--color-primary);
}
.btn_white:hover{
	background: var(--color-bg-primary-light);
}
.gnav :is(a, .acc_ttl),
.fnav a{
	transition: opacity .2s;
}
.gnav :is(a, .acc_ttl):hover,
.fnav a:hover{
	opacity: .7;
}

/* layout
----------------------------------------------------------------------*/
.layout{
	max-width: calc(1000px + 20vw);
}
main .layout{
	max-width: 1000px;
}

/* mv
----------------------------------------------------------------------*/
.mv + main > section:first-child{
	margin-top: 60px;
}

/* main
----------------------------------------------------------------------*/
section{
	padding: 80px 0;
}
.sec_ttl{
	font-size: 3rem;
	margin: 0 auto 40px;
}
section > .txt_area{
	text-align: center;
}
section > .txt_area:not(:first-child){
	margin: -20px auto 40px;
}
.item_ttl{
	font-size: 2.2rem;
}
.txt_area.u-ta-c{
	text-align: center;
}
.txt_area .btn_area{
	justify-content: start;
}
.content_w80p{
	max-width: 80%;
	margin-left: auto;
	margin-right: auto;
}

/*pagelink*/
.pagelink_col .pagelink_col{
	flex-wrap: nowrap;
}
.pagelink a{
	transition: opacity .2s;
}
.pagelink a:hover{
	opacity: .7;
}
.column_count2{
	grid-auto-flow: column;
	grid-template-rows: repeat(3, auto);
}

/*card*/
.sec_card{
	padding-left: 40px;
	padding-right: 40px;
}

/*media*/
.media,
.media_rev{
	gap: 20px 30px;
}
.media{
	flex-direction: row;
}
.media.flex_wrap{
	flex-wrap: wrap;
}
.media.item2{
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}
.media_rev{
	flex-direction: row-reverse;
	justify-content: start;
}
.media_txt{
	min-width: 50%;
}
.media_txt .btn_area{
	justify-content: start;
}

/*grid*/
.grid:is(.item3, .item4){
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/*dl_table_wrap*/
.dl_table_wrap{
	grid-template-columns: repeat(auto-fit, minmax(200px, auto) minmax(50%, 1fr));
}
.dl_table_wrap .dl_table_wrap{
	grid-template-columns: repeat(auto-fit, minmax(60px, auto) minmax(50%, 1fr));
}
.dl_grid_wrap{
	grid-template-columns: repeat(auto-fit, minmax(60px, auto) minmax(220px, 1fr));
}
.dl_table_wrap dl{
	grid-template-columns: repeat(auto-fit, minmax(auto, 200px) minmax(50%, 1fr));
	border-top: 1px solid var(--color-gray);
	border-bottom: 1px solid var(--color-gray);
}
:is(.dl_table_wrap, .dl_grid_wrap) > dl{
	display: grid;
	grid-template-columns: subgrid;
	grid-column: span 2;
}
.dl_table_wrap > dl + dl{
	border-top: 0;
}
.dl_table_wrap > dl > dt{
	padding: 15px;
	height: 100%;
}
.dl_table_wrap > dl > dd{
	padding: 15px 30px 15px 30px;
}
.dl_table_wrap .dl_table_wrap > dl{
	border: 0;
}


/*table*/
:not(.media) > .table_wrap,
:not(.media) > .table_wrap > table{
	max-width: fit-content;
	margin-left: auto;
	margin-right: auto;
}
table{
	display: table !important;
	width: 100%;
}
thead{
	display: table-header-group !important;
}
thead th{
	text-align: center;
}
tbody{
	display: table-row-group !important;
}
tr{
	display: table-row !important;
}
th,
td{
	display: table-cell !important;
	vertical-align: middle;
}
tbody th{
	white-space: nowrap;
}
.subhead:first-child{
	border-top: 1px;
}
td[data-label]{
	background: #fff;
}
table [data-label]::before,
table .subhead + [data-label]::before,
.table_wrap.scroll_x::before{
	content: none;
}

/*sec_list_num*/
.sec_list_num > li{
	align-items: baseline;
}

/*sec_flow*/
.sec_flow > li{
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row-reverse;
	padding-left: 0;
}
.sec_flow .media_txt::before{
	position: static;
}
.sec_flow .media_img{
	margin: 0;
	max-width: 300px;
	width: 100%;
}

/*list_flow*/
.list_flow > li{
	align-items: center;
	padding: 0;
	font-size: 2rem;
}
.list_flow > li::after{
	--position: 50%;
	left: 23px;
	font-size: 3rem;
}
.list_flow > li:first-child::after{
	top: var(--position);
	height: calc(var(--position) + var(--gap));
}
.list_flow > li:last-child::after{
	top: auto;
	bottom: var(--position);
	height: calc(var(--position) + var(--gap));
}
.list_flow > li::before{
	position: static;
	font-size: 3rem;
	width: 50px;
	height: 50px;
}
.list_flow_l > li{
	display: grid;
	gap: 30px;
	align-items: start;
}
.list_flow_l > li::after{
	--position: 100%;
}
.list_flow_l > li:first-child::after{
	top: 0;
}
.list_flow_l figure{
	justify-content: center;
	margin-bottom: 0;
}

/*news*/
.news > li{
	display: flex;
	align-items: baseline;
	gap: 30px;
	padding: 15px 10px;
	position: relative;
}
.news > .sub{
	padding-left: 24px;
}
.news > .sub::before{
	left: 10px;
}
.news a{
	color: var(--color-text);
	width: 100%;
}
.news a::before{
	content: "";
	position: absolute;
	inset: 0;
	transition: background .2s;
}
.news a:hover::before{
	background: rgba(var(--color-primary-rgb), .1);
}

/*box_link_list*/
.box_link_list{
	grid-template-columns: 1fr 1fr;
}
.box_link_list > li{
	padding-top: 15px;
	padding-left: 205px;
	min-height: 125.6px;
}
.box_link_list > li::before{
	inset: 0 auto auto 0;
	width: 175px;
	height: 100%;
}
.box_link_list a{
	transition: background .2s;
}
.box_link_list a:hover::before{
	background: rgba(var(--color-primary-rgb), .1);
}
.box_link_list a{
	transition: color .2s;
}
.box_link_list a:hover::after{
	position: relative;
	animation: arrow .3s ease-out forwards;
}
.box_link_list a:hover{
	color: var(--color-primary);
}

/*tab_page*/
.tab_page{
	grid-template-columns: repeat(2, 1fr);
}
.tab_page a{
	transition: opacity .2s;
}
.tab_page a:hover{
	opacity: 0.7;
}

/*sec_link*/
.sec_link{
	min-height: 200px;
}
.sec_link + .sec_link{
	margin-top: 80px;
}
section .sec_link:nth-child(odd){
	grid-template-columns: 40% 1fr;
}
section .sec_link:nth-child(even){
	grid-template-columns: 1fr 40%;
}
.sec_link:nth-child(even) .sec_link_bg{
	grid-area: 1 / 2 / 2 / 3;
}
.sec_link_bg{
	height: 200px;
	width: 100%;
	margin: 0;
}
.sec_link_bg img{
	height: 200px;
}
.sec_link_list a{
	transition: color .2s;
}
.sec_link_list a:hover::after{
	position: relative;
	animation: arrow .3s ease-out forwards;
}
@keyframes arrow{
	0%{
		opacity: 0;
		left: -10px;
	}
	100%{
		left: 0;
	}
}
.sec_link_list a:hover{
	color: var(--color-primary);
}

/* Footer
----------------------------------------------------------------------*/
.fnav{
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 50px 30px;
}
.fnav_head{
	margin-bottom: 10px;
}
.fnav li:not(.fnav_head){
	display: block;
}
.fnav li li{
	position: relative;
	padding-left: 15px;
}
.fnav li li::before{
	content: "";
	position: absolute;
	inset: calc(.9em - .5px) auto auto 0;
	margin: auto 0;
	width: 8px;
	height: 1px;
	background: #fff;
}
.fnav_mark_wrap{
	text-align: right;
	margin-top: 40px;
}
.fnav_mark img{
	max-height: 50px;
}
.fnav_sub{
	display: flex;
	justify-content: center;
	gap: 20px;
}

/* cookie
----------------------------------------------------------------------*/
.c-cookie__box .c-container {
	display: flex;
	align-items: center;
 }

/* anime
----------------------------------------------------------------------*/
.anime_bg.sec_link_bg::after{
	width: 100%;
}

/* utility
----------------------------------------------------------------------*/
.u-ta-r-pc{
	text-align: right;
}
br.is-sp{
	display: none;
}
br.is-pc{
	display: block;
}
.hidden-pc{
	display: none !important;
}

/*=====================================================================
   769 end
======================================================================*/
}

/*=====================================================================
   1200 start
======================================================================*/
@media screen and ( min-width:1200px ){
	body{
		position: static !important;
	}

/* mv
***********************************************************************/
header + *{
	margin-top: calc(56px + 1.4rem) !important;
}
.mv_ttl{
	font-size: 4rem;
}
.mv_txt{
	text-align: center;
}
.mv_img{
	height: 260px;
}

/* gnav
***********************************************************************/
header{
	height: auto;
}
header::before{
	content: none;
}
nav > .layout{
	display: flex;
	align-items: flex-end;
	gap: 30px;
	position: static;
	padding: 0 20px;
	margin: 0 auto;
	height: auto;
	max-width: 100%;
	box-shadow: 0 0 10px rgba(0, 0, 0, .2);
}
.gnav_wrap{
	display: block!important;
	position: static;
	padding: 30px 0 0;
	height: auto;
	background: transparent;
	overflow-y: visible;
	visibility: visible;
	opacity: 1;
}
.logo_wrap{
	padding: 0 0 10px;
	width: auto;
	height: auto;
	background: transparent;
	box-shadow: none;
}
header.is-active .logo_wrap{
	width: auto;
}
.logo img{
	height: 25px;
}
.gnav{
	flex-direction: row;
	justify-content: end;
	align-items: end;
	padding-bottom: 0;
}
.gnav > li:not(:last-child){
	position: relative;
	cursor: pointer;
}
.gnav > li:last-child{
	margin-left: 15px;
}
.gnav a{
	color: var(--color-text);
	font-size: 1.6rem;
}
.gnav .acc_ttl a{
	pointer-events: all;
	cursor: pointer;
}
.gnav .gnav_ttl{
	position: relative;
	padding: 0 15px 4px;
	color: var(--color-text);
	font-size: 1.6rem;
	border-radius: 0;
}
.gnav > li.is-active .gnav_ttl::before{
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	margin: 0 auto;
	height: 4px;
	width: calc(100% - 30px);
	background: var(--color-primary);
}
.gnav input:checked ~ .acc_content{
	opacity: 0;
	visibility: hidden;
}
.gnav li:hover > .acc_content,
.gnav .acc_content:hover{
	opacity: 1 !important;
	visibility: visible !important;
}
.gnav .acc_ttl::after{
	border-color: var(--color-primary);
}
:is(.gnav li:hover) .acc_ttl::after{
	top: -2px;
	transform: rotate(45deg);
}
.gnav_ttl a::before{
	content: "";
	position: absolute;
	inset: 0;
}
.gnav .acc_content{
	position: fixed;
	inset: 0 auto auto 0;
	width: 100vw;
	height: auto;
	min-height: calc(3em + 50px);
	padding: calc(86px + 1.4rem) 20px 30px;
	background: var(--color-bg-primary-pail);
	font-weight: bold;
	opacity: 0;
	visibility: hidden;
	z-index: -1;
}
.gnav .acc_content > .layout{
	display: flex;
	width: fit-content;
	margin: 0 auto;
}
.gnav .acc_content a{
	display: inline-flex;
	gap: 4px;
	align-items: center;
	color: var(--color-text);
	transition: color .2s;
}
.gnav .acc_content a:hover{
	color: var(--color-primary);
	opacity: 1;
}
.gnav .acc_content a::after{
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	background: url(../images/arrow.svg) center / contain no-repeat;
}
.acc_content_ttl_wrap{
	width: 250px;
	padding-right: 30px;
	margin-right: 30px;
	border-right: 1px solid var(--color-primary);
	text-align: center;
  transition: all 0.3s;
  transition-delay: 0.3s;
}
.acc_content_ttl{
	display: block;
	font-size: 2rem;
}
.acc_content_nav{
	display: grid;
	justify-content: center;
  grid-template-columns: repeat(3, calc(13em + 4px));
  gap: 10px 40px;
  transition: all 0.3s;
  transition-delay: 0.3s;
}
	.acc_content_nav li:hover > ul {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
	}


/*lang*/
.lang{
	padding-bottom: calc(.4em + 4px);
}

/*hamburger_menu*/
#hamburger_menu{
	display: none;
}

/*=====================================================================
   1200 end
======================================================================*/
}