@charset "utf-8";

@import url('../fonts/font.css');

/*==============================================================
>>> INDEX
==============================================================
1.0 Reset              :   htmlがもともと持つ余計な余白等のリセット
2.0 CommonDesign       :   フォント/見出し/リンクカラーなど、全体で適用される基本的な共通書式
3.0 Utility            :   文字を太くする・フロート・フロート解除・マージンパディング指定など、サイト全体でクラス名を指定して共通で使う、単純な設定
                           Moduleと比べ、特に要素（タグ）が限定されないもの
4.0 Module             :   定義リストのテーブル化、ページおくりの装飾など、サイト全体でクラス名を指定して共通で使う、かたまりの設定
                           Utilityと比べ、特に要素（タグ）が限定されているもの

5.0 Template
  5.01 Common Header  :  ヘッダー&ナビ 共通デザイン
  5.02 PC Header       :   PC用ヘッダー&ナビデザイン
  5.03 SP Header       :   SP用ヘッダー&ナビデザイン
  5.04 Main            :   共通メインコンテンツエリアデザイン
  5.05 Footer          :   共通フッターデザイン
  5.06 TopDesign       :   トップページのデザイン
  5.07 SubCommonDesign :   下層ページの共通デザイン
  5.08 SubDesign       :   それ以外のページごとの個別設定
                           ページごとの固有のクラスで区別
==============================================================*/


/*==============================================================
1.0 Reset        :   htmlがもともと持つ余計な余白等のリセット
==============================================================*/
body {
	margin:0px;
	padding:0;
}
img{
	vertical-align: bottom;
	border:none;
	height: auto;
}
h1,h2,h3,h4,h5,h6,ul,ol,li{
	margin:0px;
	padding:0px;
}
li h1,li h2,li h3,li h4,li h5,li h6{
	display:inline;
}
ul,ol{
	list-style:none;
}
li{
	list-style-position:inside;
}
dl,dd{
	margin:0;
}
p{
	margin:0;
}
address{
	font-style:normal;
}
* {
	box-sizing:border-box;
	min-height: 0%; /* IE11対策 */
}
div[class^="icon-"]{
	display:inline-block;
}
input{
	outline:none;
}
input[type="submit"],
input[type="button"],
input[onclick]{
	border-radius: 0;
	-webkit-box-sizing: content-box;
	-webkit-appearance: button;
	appearance: button;
	border: none;
	box-sizing: border-box;
	cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration,
input[onclick]::-webkit-search-decoration {
	display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus,
input[onclick]::focus{
	outline-offset: -2px;
}

/* フォントスタイル */
.krona-one {
	font-family: 'Krona One'
}

/*gmap
---------------------------------------*/
.gmap {
	position: relative;
	height: 420px;
	overflow: hidden;
}

.gmap iframe,
.gmap object,
.gmap embed {
	/* position: absolute; */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*==============================================================
2.0 CommonDesign       :   フォント/見出し/リンクカラーなど、全体で適用される基本的な共通書式
==============================================================*/
body {
    font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
    font-size: 13px;
    background-color: #fff;
    font-weight: 600;
    letter-spacing: 0.1em;
}
body,a{
    /* color: #000; */
}
a{
	transition:.2s;
}
a:hover,
a:hover *,
a:focus,
a:focus *{
	opacity:.9;
	transition:.2s;
	color: #fff;
	text-decoration:none;
}
a:hover img{
	transition:.2s;
	opacity:.8;
}
p,li{
    line-height: 1.7em;
}
.text-area p{
	margin-bottom:1.2em;
}
[class*="marker-"] > li{
	margin-left: 1.1em;
	text-indent: -1.1em;
}
[class*="marker-"] li p{
	text-indent:0;
	margin-left: 1em;
}
[class*="marker-"] h5::after{
	content:"";
	display:block;
	border-bottom:1px solid #e9e9e9;
	padding-bottom:15px;
	margin-bottom:15px;
	/* width: calc(100% + (1.1em * 2 )); */
	margin-left: -1.1em; /* [class*="marker-"] li の距離と合わせる */
}
@media (max-width: 991px){
	[class*="marker-"] h5::after{
		padding-bottom:11px;
		margin-bottom:11px;
	}
}
.marker-note > li{
	margin-left: 2em;
	text-indent: -1.1em;
}
.marker-note li{
	line-height: 2em;
}
.marker-note li::before{
	content:"※";
}
.marker-num > li::before,
.marker-tri > li::before,
.marker-check > li::before{
	color:#800000;
	font-size: 1.3em;
	margin-right: .3em;
	font-family: 'Barlow', sans-serif;
	font-weight:bold;
}
.marker-num{
	counter-reset:number;
}
.marker-num > li::before{
	counter-increment: number;
	content: counter(number) ".";
}
.marker-tri > li::before{
	content:"\ea1c";
	font-size: 0.9em;
	margin-right: .9em;
	font-family:'icomoon';
}
.marker-check li{
	line-height:2em;
}
.marker-check > li::before{
	content:"\e914";
	color:#dd2525;
	font-size: 0.9em;
	margin-right: .9em;
	font-family:'icomoon';
}
.marker-disk li::before{
	content:"・";
}
.marker-disk > li{
	margin-left: 2em;
	text-indent: -1.1em;
}
.img100{
	width:100%;
}
.barlow{
	font-family: 'Barlow', sans-serif;
	font-weight:100;
}
.red,.red *{
	color:#dd2525 !important;
}
.blue{
	color:#22396e;
}
.note{
	font-size:.9em;
}


/*見出し系まとめ
---------------------------------------*/
.ejtitle1{
	font-weight: 600;
}
.ejtitle1.column{
	text-align:center;
}
.ejtitle1 .en{
	font-size:27px;
	letter-spacing:.1em;
	font-weight: 100;
	font-family: 'Krona One', 'Barlow', sans-serif;
}
.ejtitle1 .ja{
	font-size:12px;
	/* color: #0000C8; */
}
.ejtitle2 span:first-child{
	font-size:20px;
}
.ejtitle2 span:nth-of-type(2){
	color:#000;
	font-size:15px;
	letter-spacing:.1em;
}
.section-title{
	margin-bottom:30px;
}
.section-title .ja{
	font-size:15px;
	color:#0000C8;
}
.under-titlelv1{
	font-size:20px;
	/* margin-bottom: 20px; */
}

/*==============================================================
3.0 Utility         :   文字を太くする・左に寄せる・フロート解除など、サイト全体でクラス名を指定して共通で使う、単純な設定
                        Moduleと比べ、特に使い道が限定されないもの
==============================================================*/
.flex{
	display:flex;
}
.flex.column{
	flex-direction: column;
}
.flex.wrap{
	flex-wrap: wrap;
}
.flex.wstart{
	justify-content:flex-start;
}
.flex.wend{
	justify-content:flex-end;
}
.flex.wbetween{
	justify-content: space-between;
}
.flex.wcenter{
	justify-content: center;
}
.flex.vcenter{
	align-items: center;
}
.flex.vstart{
	align-items: flex-start;
}
.flex.vend{
	align-items: flex-end;
}
.flex.vbetween{
    flex-flow: row wrap;
    align-content: space-between;
    align-items: flex-start;
}
.float.left{
	float: left;
}
.float.right{
	float: right;
}
.clearfix::after{
	content: "";
	clear: both;
	display: block;
}
.center {
	margin:0 auto;
}
.t-left{
	text-align:left;
}
.t-center{
	text-align:center;
}
.t-right{
	text-align:right;
}
.b-center{
	margin-left:auto !important;
	margin-right:auto !important;
}
.strong{
	font-size:1.2em;
}
.circle{
	border-radius:50%;
}
.darkback{
	background-color:#101010;
}

.flex.pc-flex {display:flex;}
@media screen and (max-width: 991px) {
.flex.pc-flex {display:block}
}
/*==============================================================
4.0 Module       :   定義リストのテーブル化、ページおくりの装飾など、サイト全体でクラス名を指定して共通で使う、かたまりの設定
                        Utilityと比べ、特に使い道が限定されているもの
==============================================================*/

/*img-fit
---------------------------------------*/
.imgfit{
    height: 100%;
}
.imgfit img{
	max-width:100%;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
	font-family: 'object-fit: cover;'; /*IE対策*/
}

/*btn
---------------------------------------*/

/* グラデーション */
.grad-btn{
	display:flex;
	position:relative;
	align-items:center;
	justify-content:center;
	width:auto;
	margin:0;
	line-height:1;
	background: linear-gradient(90deg, #0303C8 0%, #7171E1 70%); 
	border-radius: 5px;
	padding:2px;
}
.grad-btn-inner{
	background-color: #fff;
	width: 100%;
	border-radius: 3px;
	padding:3px;
	text-align: center;
}
.grad-btn p {
	background: linear-gradient(90deg, #0303C8 0%, #7171E1 70%); 
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: transparent;
}
/* END.グラデーション */
/* グラデーション反転 */
.grad-btn-reverse{
	display:flex;
	position:relative;
	align-items:center;
	justify-content:center;
	width:auto;
	margin:0;
	line-height:1;
	background: linear-gradient(90deg, #0303C8 0%, #7171E1 80%); 
	border-radius: 5px;
	padding:2px;
}
.grad-btn-reverse-inner{
	background: linear-gradient(90deg, #0303C8 0%, #7171E1 80%); 
	width: 100%;
	border-radius: 3px;
	padding:3px;
	text-align: center;
}
.grad-btn-reverse p {
	color:#fff;
}
/* END.グラデーション反転 */
.btn{
	display:flex;
	position:relative;
	padding: 18px 15px;
	align-items:center;
	justify-content:center;
	width:-webkit-fill-available;
	max-width:280px;
	line-height:1;
	background: linear-gradient(90deg, #0303C8 0%, #7171E1 70%); 
	border-radius: 5px;;
	color: #fff;
	border: 1px solid #c4c4c4;
}
.btn-inner{
	background-color: #fff;
	width: 100%;
	border-radius: 3px;
	padding:2px;
	text-align: center;
}
.btn p {
	background: linear-gradient(90deg, #0303C8 0%, #7171E1 70%); 
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: transparent;
}
a:hover .btn,
.btn:hover{
	border:1px solid #dd2525;
}

.btn[target]::after{
	content:none;
}
.btn[target]::before{
	content:"\f35d";
	margin-right:8px;
}

.color-btn{
	padding:14px 18px;
	border:1px solid transparent;
}
.color-btn::after{
	font-size:19px;
}
.color-btn:hover{
	background-color:transparent;
}
.red-btn{
	background-color:#dd2525;
	border-color:#dd2525;
}
.gray-btn{
	background-color:#969fb1;
	border-color:#969fb1 !important;
}
.gray-btn:hover,
.gray-btn:hover *{
	color:#969fb1 !important;
}
.simple-btn{
	color:#313131;
	border:1px solid #c5c5c5;
}

.gradation-btn {
	background: linear-gradient(#f3f2f3, #dbdada);
	border-color:#c5c5c5;
	color:#545454;
	justify-content: space-between;
}
.gradation-btn:hover {
	border-color:#c5c5c5;
}
.gradation-btn::after {
	font-size:19px;
	color:#545454;
}

/*汎用アイコンフォント
---------------------------------------*/
.icon::before,.icon::after{
	font-family: "Font Awesome 5 Free";
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
	font-weight:600;
}

/*news
---------------------------------------*/
.newslist div{
	display:inline-block;
}
.newslist li{
	display:block;
	padding:9px 0;
}
.newslist li:first-child{
	margin-top: 0;
}
.newslist li a > * {
	display:inline-block;
}
.newslist a{
	display:flex;
	align-items: flex-start;
}
.newslist .new{
	background-color:#dd2525;
	line-height:1;
	font-size:11px;
	padding:4px 9px
}
.newslist a:hover .new{
	color:#fff;
}
.newslist .markarea{
	min-width:62px;
}
.newslist li time{
}
.newslist li time{
	margin-right: 1em;
	margin-bottom: 4px;
}
.sub-page[class*="archive-"] .newslist li,
.sub-page[class*="category-"] .newslist li{
	border-bottom:1px solid #313131;
	padding:14px 0;
}

/*pager
---------------------------------------*/
.c-pagination{
	text-align:center;
	padding-top:60px;
	display:flex;
	justify-content:center;
}
.c-pagination li > *{
	display:block;
	padding:3px 10px !important;
	margin:0 8px;
	border: 1px solid #3f3f3f !important;
	border-radius:3px;
}
.c-pagination span.current{
	color:#3f3f3f;
	background-color:#ffffff !important;
}

/*汎用スライドショー
---------------------------------------*/
.slide{
	display:flex;
	justify-content: center;
	align-items:center;
}
.slidenav ul{
	display: flex !important;
	justify-content: center;
}
.slide li{
	padding: 0 13px;
	max-width:368px;
}
/*script.jsのブレークポイントと合わせる*/
@media (max-width: 991px){
	.slide li{
		max-width:100%;
	}
}
.slick-arrow{
	font-size:32px;
	cursor:pointer;
}
.slidenav{
	margin-top: 30px;
	height:5px;
	overflow:hidden;
}
.slidenav li{
	padding:0 4px;
}
.slidenav button{
	background-color:#fff !important;
	color:#fff !important;
	border:none;
	width:28px;
}
.slick-active button{
	background-color:#dd2525 !important;
	color:#dd2525 !important;
}

/*visual editor
---------------------------------------*/
.visualeditor p {
    display: block;
    margin: 1em 0;
}
.visualeditor strong { font-weight: bold; }
.visualeditor em { font-style: italic; }
.visualeditor blockquote {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 40px;
    -webkit-margin-end: 40px;
}
.visualeditor .aligncenter {
    display: block;
    margin: 0 auto;
}
.visualeditor .alignright { float: right; margin-left:20px;}
.visualeditor .alignleft { float: left; margin-right:20px; }

.visualeditor img[class*="wp-image-"],
.visualeditor img[class*="attachment-"] {
    height: auto;
    max-width: 100%;
}
.visualeditor div::after{
	content:"";
	clear:both;
	display:block;
}

/*facebook
---------------------------------------*/
.facebook-wrapper {
    max-width: 500px;
    margin: 0 auto;
}
.facebook-wrapper > .fb-page {
    width: 100%;
}
.facebook-wrapper > .fb-page > span,
.facebook-wrapper iframe {
    width: 100% !important;
}

/*table
---------------------------------------*/
.table-base{
	width:100%;
}
.table-base th,.table-base td{
	text-align:left;
	padding: 20px;
	border-bottom: 1px solid #e8e8e8;
}
.table-base th{
	font-weight: 600;
	vertical-align: top;
	width: 14em;
	padding-left:0;
}
.table-base td{
	padding-right:0;
	font-weight: normal;
}

.table1{
	margin: 0 -4px;
	width: calc(100% + 8px);
	border:none;
	border-collapse: separate;
	border-spacing: 4px;
	background-color:transparent;
}
.table1 th,.table1 td{
	border: 0 solid transparent;
	background-color:#101010;
	padding: 16px 30px;
}
.table1 th{
	width:15em;
}
@media (max-width:991px){
	.table-tandem th,
	.table-tandem td{
		display:block;
		width: 100% !important;
		padding-left:0;
		padding-right:0;
	}
	.table1 th,.table1 td{
		padding-left:16px;
		padding-right:16px;
	}
	.table1 th{
		width:10em;
	}
}

/*フォーム
---------------------------------------*/
.textarea-base{
	width:100%;
	height: 100%;
	min-height: 500px;
	color:#313131;
	padding: 41px 46px;
}
.formparts1 td span + span{
	margin-left:.5em;
}
.formparts1 input[type="text"],
.formparts1 input[type="tel"],
.formparts1 input[type="email"],
.formparts1 textarea{
	width:100%;
	padding:4px 6px;
	border:1px solid #c8c8c8;
}
.formparts1 .small{
	max-width:100px;
}
.formparts1 .medium{
	max-width:300px;
}
.formparts1 .medium{
	max-width:300px;
}
.formparts1 textarea{
	height:5em;
}
.formparts1 span.note{
	font-size: 0.9em;
	display:block;
	color:#b1b1b1;
}
.formparts1 .required{
	display: inline-block;
	background-color:#dd2525;
	color:#fff;
	padding: 6px;
	text-align:center;
	line-height:1;
	font-size: 0.8em;
	margin-left: 1em;
}
/*グリッドシステム
---------------------------------------*/
@media (max-width: 991px){
	.pc{
		display: none;
	}
	.md-maxwidth-l{
		max-width: 500px;
		margin: 0 auto;
	}
}
@media (max-width: 767px){
	.sm-maxwidth-s{
		max-width: 300px;
		margin: 0 auto;
	}
	.sm-maxwidth-l{
		max-width: 500px;
		margin: 0 auto;
	}
}
/* スマホで段くずれを起こすバグの対応 */
.clearfix:before, .clearfix:after,
.container:before, .container:after, .container-fluid:before, .container-fluid:after,
.row:before, .row:after {
    margin-left:-1px;
}
/* containerに直接内容を書くときの左右の隙間をbootstrapの共通余白（15px）に合わせる	 */
.container-wrap.direct{
	padding-left: 15px;
	padding-right: 15px;
}
.container-wrap.direct .container{
	max-width: 1200px;
}
.container.full-width{
	max-width:100%;
	padding:0;
	overflow:hidden;
}
/* 内容量が違っても高さをそろえる */
.row{
	display: flex;
	flex-wrap: wrap;
}

/*==============================================================
5.01 Common Header  :  ヘッダー&ナビ 共通デザイン
==============================================================*/
header{
	position: relative;
}
.header{
	position:relative;
	z-index:1000;
}
.header-container-wrap{
	width: 90%;;
}
.site-title{
	font-size:30px;
	letter-spacing:.15em;
	padding:4px 0;
}
.language{
	position:relative;
	font-size: 20px;
}
.language span{
	font-size: 13px;
	margin-right:.5em;
}
.language .togglebtn{
	padding: 0 18px;
}
.sp-header .language .togglebtn{
	padding: 0 8px;
}
.language .togglebtn:hover{
	cursor:pointer;
}

.language .lang-list{
	display:none;
}
.language:hover .lang-list{
	display:block;
	position:absolute;
	top:100%;
	left:0;
	background-color: #c41d1d;
	width: 100%;
	padding: 8px 20px;
}
.language:hover .lang-list li{
	padding:5px 0;
}

.pc-header .language .lang-list{
	padding-top: 0;
}

.pc-header .language .lang-list:hover,
.pc-header .language:hover .lang-list{
	display:block;
	position:absolute;
	top:100%;
	top: 53px;
	left:0;
	right: 0;
	width: 100%;
	padding: 0px 0px 8px 0px;
}

.pc-header .bogo-language-switcher{
	padding-top: 0;
	position: relative;
	z-index: 999;
	background-color: #c41d1d;
}

.pc-header .lang-list .bogo-language-switcher li{
	padding-left: 20px;
}

.pc-header .lang-list .bogo-language-switcher li span{
	padding: 0;
	margin: 0;
}

.pc-header .lang-list .bogo-language-switcher li a{
	padding-left: 20px;
	padding-right: 20px;
}

.pc-header .bogo-language-switcher li a:hover{
	opacity: 0.8;
	color: #fff;
}

/* 2019/09/23 okada */
.header-notice{
	color: #8a6d3b;
	background-color: #fcf8e3;
	border: 1px solid transparent;
	border-radius: 4px;
	text-align: center;
}
.header-notice a{
	color: #8a6d3b;
}

/*==============================================================
5.02 PC Header       :   PC用ヘッダー&ナビデザイン
==============================================================*/
.pc-header .header-top,
.pc-header .header-bottom{
	padding:0;
}
.pc-header .header-bottom .container {
	overflow:visible;
}
.pc-header h1{
	font-size:12px;
	font-weight:300;
	padding: 10px 0 10px 10px;
}
.pc-header .header-top{
	border-bottom: 1px solid #474747;
}
.pc-header .subnav *{
	display: inline-block;
}
.pc-header .subnav li{
	display:inline-block;
	display:flex;
	align-items:stretch;
	padding:10px 0;
}
.pc-header .subnav li a{
	display:block;
	padding: 9px 25px;
	display:flex;
	align-items:center;
	font-weight: normal !important;
}
.pc-header .subnav li.reserve {
	background: linear-gradient(90deg, #0303C8 0%, #7171E1 70%); 
}
.pc-header .subnav li.reserve a {
	color: #fff;
}
.pc-header .subnav i{
	margin-right: 0.8em;
}
.pc-header .subnav address{
	letter-spacing:0;
	font-size: 16px;
}
.pc-header .subnav .reserve a{
	color:#dd2525;
	font-weight:600;
}
.pc-header .subnav .reserve a:hover{
	/* background-color:#fff; */
	opacity:1;
}
.pc-header .mainnav li {
	border-right: 1px solid #000;
	width: 100%;
	text-align: center;
}
.pc-header .mainnav li:last-child {
	border-right: none;
}
.pc-header .mainnav li a{
	padding: 0 18px;
	font-size: 16px;
}
.pc-header .mainnav li .language a {
padding-right:4px;
}
.pc-header .social li a{
	padding:0 6px;
}
.pc-header .social{
	margin-right:23px;
}

.header-top .container{
	background-color: #000;
	padding:0 !important;
}
.header-top .container a{
	color: #fff !important;
}

.header-bottom{
	padding:0;
	position: absolute;
	left:50%;
	top:80px;
	width:98%;
	transform: translateX(-50%);
	z-index: 99;
	background-color: #fff;
	border-radius: 4px;
	display: block; /* 明示的に表示を指定 */
}
.header-bottom.container-wrap{
	width: 95%;
	background-color: #fff;
}
	
.header-bottom .container{
	color: #000;
	height: auto;
	width: 100%;
	padding:8px !important;
	margin: 0;
}

/*==============================================================
5.03 SP Header       :   SP用ヘッダー&ナビデザイン
==============================================================*/
.sp-header{
	display: none; /* デフォルトでは非表示 */
	position: fixed;
	top: -75px;
	transition: .4s;
	z-index: 2;
	width: 100%;
}

/* スマートフォン表示時のみSPヘッダーを表示 */
@media (max-width: 1075px) {
	.sp-header {
		display: block;
	}
	.pc-header {
		display: none !important;
	}
}
.sp-header .inner{
	display:flex;
	justify-content:space-between;
	padding: 0 0 0 15px;
	position: relative;
	z-index: 10;
}
.sp-header .inner .right{
	display:flex;
}
.sp-header .sp_menu_btn{
	cursor:pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	font-size: 20px;
}
.sp-header .sp_menu_btn.open::before{
	content:"\f00d";
}
.sp-header .menupanel{
	pointer-events: none;
	position: fixed;
	z-index: 5;
	width: 100%;
	top: -10px; /* メニューパネル表示時にほんの少し下がったアニメーションをつけるため */
	background-color:#202020;
	opacity:0;
	overflow: auto;
	transition: .4s;
	display:flex;
	flex-flow: row wrap;
	align-content: center;
	/* 2019/09/23 okada 50px -> 70px */
	height: calc(100% - 70px); /*sp-menuの高さ分マイナス（垂直センタリングをするため*/
}
.sp-header a {
    color: #fff;
}
.sp-header a.language-switch {
    color: #000;
}
/*
 ウィンドウサイズが縦に非常にせまいとき、上のメニューが隠れて見えなくなるので
 垂直センタリングを解除
*/
@media (max-height:580px){
	.sp-header .menupanel{
		align-content:flex-start;
	}
}
.sp-header .menupanel.open{
	pointer-events:auto;
	opacity:1;
	/* 2019/09/23 okada 50px -> 70px */
	top: 70px; /* SPメニューの高さと合わせる */
}
.sp-header .menupanel ul{
	display:flex;
	width:100%;
	flex-direction:column;
	align-items:center;
	justify-content:center;
}
.sp-header .menupanel .language.flex {display: block;}
.sp-header .menupanel .language.flex .flex {display: block;}
.sp-header .menupanel .language a.language-switch {color:#fff; font-size:13px;}
.sp-header .menupanel .language span {display: none;}
.sp-header .menupanel ul.social{
	display:flex;
	flex-flow:row nowrap;
}
.sp-header .menupanel ul:not(.social) li{
	width:100%;
}
.sp-header .menupanel ul:not(.social) a{
	justify-content:center;
	width:90%;
	margin:auto;
	border-top:1px solid #313131;
}
.sp-header .menupanel a{
	display: flex;
	align-items: center;
	padding:16px;
}
.sp-header .menupanel a i{
	margin-right:10px;
}

/***************************************
 sp用表示（スクロールダウン処理とはわけたいもの）
 ブレークポイントはヘッダーが崩れるタイミング
****************************************/
@media (max-width: 1075px){
	.pc-header{
		display:none;
	}
	.body{
		/* 2019/09/23 okada 50px -> 70px */
		padding-top: 70px; /*sp-menuの高さに合わせる*/
	}
}
/***************************************
 sp用表示はメディアクエリのみでも可能だが
 jsのスクロールダウンと連携する関係上、
 bodyのクラスの有無で判別する
****************************************/
body.sp-header-active .sp-header{
	top:0;
}

/* 2019/09/23 okada */
.sp-header .header-notice{
	position: relative;
}

/*==============================================================
5.04 Main            :   共通メインコンテンツエリアデザイン
==============================================================*/
@media (min-width: 1024px){
	.container {
		max-width: none !important;
		padding-left: 30px !important;
		padding-right: 30px !important;
		padding-top: 30px !important;
		padding-bottom: 30px !important;
	}
}
@media (max-width: 1023px){
	.container {
		max-width: none !important;
		padding-top: 15px !important;
		padding-bottom: 15px !important;
	}
}

.container-wrap{
	width: 100%;
	background-color: #F3F4F6;
}
.container{
	max-width:1230px;
	box-sizing:border-box;
	width: 100%;
	overflow: hidden;
}
@media (max-width: 991px){
	.container-wrap{
		padding: 40px 20px;
	}
}

/*==============================================================
5.05 Footer          :   共通フッターデザイン
==============================================================*/
.footer{
	font-size:.9em;
	background-color: #000124;
	color: #fff;
}
.footer .container{
	max-width:1000px;
}
.footer .container-wrap{
	background-color: #000124;
}
.section-footertop{
	border-bottom:1px solid #3d3d3d;
}
.footer .logo{
	font-size:30px;
	padding-right:20px;
	margin: 0 60px 0 100px;
}

.footertop-sitemap{
	display: flex;
	margin-bottom: 40px;
}
.footertop-sitemap ul{
	margin-right: 60px;
}
.footertop-sitemap li{
	line-height:1;
	/* padding:0 6px; */
	margin: 7px 0;
	white-space: nowrap;
}
.footertop-sitemap li:first-child{
	border:none;
	padding-left:0;
}
.footertop-sitemap ul li {margin-bottom:12px;}
.footertop-sitemap ul li a{
	font-size:13px;
	font-weight: normal;
	font-family: YuGothic;
	color: #fff;
}

.section-fotermiddle .sitemap li {
	margin-right: 20px;
}
.section-fotermiddle .sitemap li:last-child {
	margin-right: 0;
}
.section-fotermiddle .sitemap li a {
	font-weight: normal;
}

.copyright {
	font-family: 'Krona One', 'Barlow', sans-serif;
	font-size: 13px;
}

@media (max-width: 991px){
	.section-footertop{
		padding-top:25px;
	}
	.footertop{
		padding-left:0;
		padding-right:0;
	}
	.footertop .logo a{
		display: block;
		width: 160px;
	}
	.footertop address,
	.footertop nav{
		padding-left:15px;
		padding-right:15px;
	}
	.footertop address{
		border-bottom:1px solid #313131;
		padding-bottom:15px;
		margin-bottom:15px;
	}
	.footertop-sitemap {flex-direction: column;}

	.section-fotermiddle nav{flex-direction: column; align-items: center;}
	.section-fotermiddle nav .copyright{margin-top:20px;}
}

/*==============================================================
5.06 TopDesign       :   トップページのデザイン
==============================================================*/

/*アイキャッチ
---------------------------------------*/
.page-index .section-eyecatch{
	position:relative;
	/* 2019/09/23 okada 50px -> 70px */
	padding: 70px 0;
	height: 600px;
}
.page-index .section-eyecatch .mask{
	position:absolute;
	left:0;
	top:0;
	width: 100%;
	height:auto;
	background-color: #7C0EFA4D;
	opacity: 0.3;
}
.page-index .section-eyecatch .container{
	position:relative;
	height: 100%;
	display: flex;
	align-items: center;
	padding:0;
}
.page-index .section-eyecatch h2{
	font-size: 30px;
	letter-spacing: 0.08em;
	text-align:left;
	margin-left:40px;
}
.page-index .section-eyecatch h2 span{
	display:block;
}
.page-index .section-eyecatch h2 .sub{
	font-size:20px;
	font-family: YuGothic;
	font-weight: normal;
}
.page-index .section-eyecatch h2 .main{
	font-size:60px;
	font-family: 'Krona One', 'Barlow', sans-serif;
}
.page-index .section-eyecatch h3{
	color:#202020;
	display: flex;
}
.page-index .section-eyecatch h3 .main i,
.page-index .section-eyecatch h3 .main{
	margin-right:8px;
}
.page-index .section-eyecatch h3 .sub{
	font-size:13px;
}
.page-index .section-eyecatch .btn{
	max-width: 100%;
}
.page-index .section-eyecatch .bottom-content{
	position: absolute;
	right: 40px;
	bottom: 40px;
}
.page-index .section-eyecatch .bottom-content.modal_open{
	z-index: auto;
}
.page-index .section-eyecatch .bottom-content .social{
	display: flex;
	justify-content: flex-end;
}
.page-index .section-eyecatch .bottom-content .for-visitor-link a{
   text-decoration: none;
   color: #fff;
}
.page-index .section-eyecatch .bottom-content .for-visitor-link a div{
	background-color: #E70012;
	text-align: center;
	font-size: 16px;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin:0 auto 20px;
}

@media (max-width: 1075px){
	.page-index .section-eyecatch {
		height: fit-content;
		min-height: 300px;
		padding: 40px 0;
	}
	.page-index .section-eyecatch .container {
		justify-content: center;
	}
	.page-index .section-eyecatch .container > .inner{
		display: flex;
		flex-flow: column wrap;
		justify-content:center;
		align-items: center;
	}
	.page-index .section-eyecatch h2{
		text-align:center;
		margin: 0 auto
	}
	.page-index .section-eyecatch h2 .main{
		font-size:35px;
	}
	.page-index .section-eyecatch h2 .sub{
		font-size:14px;
	}

	.page-index .section-eyecatch .bottom-content .for-visitor-link a div {
		width: 180px;
		height: 80px;
		border-radius: 50px;
	}
}
@media (max-width: 991px){
	.page-index .section-eyecatch .bottom-content{
		bottom:20px;
		left:50%;
		transform: translateX(-50%);
	}
	.page-index .section-eyecatch .bottom-content.btn-fixed{
		transform: none;
	}
	.page-index .section-eyecatch .bottom-content .social{
		justify-content: center;
	}
}
@media (max-width: 498px){
	.page-index .section-eyecatch h2 {margin-bottom:60px;}
}	

/*そのほか
---------------------------------------*/
/* Line Up */
.page-index .section-lineup .inner {
	border:1px solid #C5C5C5;
	border-radius: 5px;
	padding:10px;
}
.page-index .section-lineup .inner a{
	height:100%;
	margin: auto;
}
@media (max-width: 1027px){
	.page-index .section-lineup .col-md-4.lineup-item {
		width: 50% !important;
	}
}
@media (max-width: 991px){
	.page-index .section-lineup{
		/* max-width:700px; */
	}
}
@media (max-width: 780px){
	.page-index .section-lineup .col-md-4.lineup-item {
		width: 100% !important;
	}
	.page-index .section-lineup .inner a {margin-right: 0 !important;}
}
.page-index .section-lineup h4{
	font-weight:700;
	font-size:15px;
	border-bottom: 1px solid #C5C5C5;
	padding:12px 0;
	width: 100%;
}
.page-index .section-lineup .btn{
	padding:2px;
}
.page-index .viewmore{
	font-size:15px;
}

/* Pickup */
.page-index .section-pickup {
	background: linear-gradient(90deg, #0E1666 0%, #131D83 25%, #131D83 50%, #0B156D 75%);
	color: #fff;
}
.page-index .section-pickup .pickup-content {
	justify-content: flex-start;
}
.page-index .section-pickup .pickup-content div {
	width: 120px;
}
.page-index .section-pickup .pickup-content h3 {
	width: calc(100% - 130px);
}
/* How To Use */
.section-howto{
	color:#fff;
	background-color: #fff;
}
.section-howto .row a{
	background-color:#fff;
	color:#545454;
	padding:25px 20px;
	height: 100%;
}
.section-howto h4{
	font-size: 30px;
	line-height: normal;
	margin-right:8px;
}
.section-howto .row a i{
	font-size:22px;
}
.howtouse-item{
	height: 280px;
	border-radius: 4px;
	position: relative;
	white-space: nowrap;
	overflow: hidden;
}
.howtouse-item:after{
	z-index:1;
	position: absolute;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-ms-background-size: cover;
	background-size: cover;
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
	transition: all .3s ease-out;
}
.howtouse-item:first-child:after {
	background-repeat: no-repeat;
	background-position: center;
	background-size:cover;
	background-image: url("../image/web/howtouse/howtouse_img_01.png");
}
.howtouse-item:nth-child(2):after {
	background-repeat: no-repeat;
	background-position: center;
	background-size:cover;
	background-image: url("../image/web/howtouse/howtouse_img_02.png");
}
.howtouse-item:nth-child(3):after {
	background-repeat: no-repeat;
	background-position: center;
	background-size:cover;
	background-image: url("../image/web/howtouse/howtouse_img_03.png");
}
.howtouse-item:hover:after{
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}
.howtouse-mask {
	position: absolute;
	z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #0202024D;
}
.howtouse-item + .howtouse-item {margin-top: 40px;}
.howtouse-item  a{
	position: relative;
	z-index: 2;
}
.howtouse-item .read-more-box {width:100%; justify-content: flex-end;}
.howtouse-item .read-more{
	border:1px solid #fff;
	border-radius: 4px;
	padding: 10px;
}
@media (max-width: 991px){
	.howtouse-item {height: 200px;}
    .howtouse-item a{
        flex-direction: column;
    }
}

.page-index .howtouse-title {
	display:flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	margin:0;
	padding:60px 5% 20px;
	background: #fff;
}
.page-index .section-intro .row a{
	display:block;
}
.page-index .section-intro .txt{
	padding:15px;
	background-color:#101010;
}
.page-index .section-howto .section-howto-container {
	padding-top:40px;
	width: 90%;
	margin: 0 auto;
}
@media (max-width: 991px){
	.page-index .howtouse-title {
		display:flex;
		flex-direction: column;
		align-items: flex-start;
	}
	.page-index .section-howto-container {
		width: 100% !important;
		padding-top:0 !important;
	}
}
	


/* トップページFAQ */
.page-index .section-faq-wrapper {padding:40px 0; background-color: #fff;}
.page-index .section-faq {padding-top:40px; border-top:1px solid #C5C5C5; background: #fff;}
.page-index .section-faq .container {
	width: 90%;
	margin: 0 auto;
	padding:0 !important;
}
.page-index .section-faq .faq-inner {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.page-index .section-faq .faq-item{
	color: #fff;
	width: 30%;
	height: 200px;
	margin-bottom:40px;
	/* overflow: hidden; */
}
.page-index .section-faq .faq-item .faq-item-inner{
	width: 100%;
	height: 100%;
	padding: 12px 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
/* グラデーション移動 */
.page-index .section-faq .faq-item .faq-item-gradation{
	width: 100%;
	height: 100%;
	position:relative;
	z-index:0;
	background: linear-gradient(90deg, #0E1666 0%, #131D83 25%, #131D83 50%, #0B156D 75%); 
	overflow: hidden;
}
.page-index .section-faq .faq-item .faq-item-gradation:before{
	content:"";
	width:100%;
	height:100%;
	position:absolute;
	z-index:-1;
	left:0;
	top: 0;
	transition:0.5s;
	background: linear-gradient(90deg, #0E1666, #1f2bb4); 
}
.page-index .section-faq .faq-item .faq-item-gradation:after{
	content:"";
	width:100%;
	height:100%;
	position:absolute;
	z-index:-2;
	left:0;
	top: 0;
	background: linear-gradient(90deg, #2e40ff, #6e7aff); 
}
.page-index .section-faq .faq-item .faq-item-gradation:hover:before{
	opacity:0;
}

.page-index .section-faq .container .faq-title{
	font-family: 'Krona One', 'Barlow', sans-serif;
	font-size: 30px;
	font-weight: normal;
	
}
.page-index .section-faq .container .faq-subtitle{
	font-size: 15px;
	font-weight: normal;
}
.page-index .section-faq .container .faq-link-arrow {
	display: flex;
	justify-content: flex-end;	
}
.page-index .section-faq .container .faq-link-arrow div{
	font-size:15px;
	border:1px solid #fff;
	border-radius: 4px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}
@media (max-width: 1280px){
	.page-index .section-faq .faq-inner {display: block;}
	.page-index .section-faq .faq-item {width: 100%; height: 140px;}
}
@media (max-width: 991px){
	.page-index .section-faq-wrapper {padding:20px 0 0;}
	.page-index .section-faq .container {max-width: none !important;}
}

/* トップページSNS */
.section-social {
	background-color: #F3F4F6;
}
.social-item {
	background-color: #fff;
	padding:8px 16px;
	margin-bottom:20px;
}
.social-title {
	font-size: 30px;
	font-weight: normal;
	font-family: 'Krona One', 'Barlow', sans-serif;
}
@media (max-width: 991px){
	.section-social .container {max-width: 100% !important;}

	

}



/* Eyecatch Slider Styles */
.section-eyecatch {
    position: relative; /* For positioning controls and overlays */
    overflow: hidden; /* Hide parts of slides that go outside */
    /* Ensure height is appropriate for background images, e.g., min-height: 500px; or specific height as needed */ 
    /* If section-eyecatch already has a height (e.g. from .container-wrap or other styles), ensure it's sufficient */
}

.eyecatch-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Behind text and controls like mask, container, bottom-content */
}

.eyecatch-slider .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 3s ease-in-out; /* Fade transition for slides */
    visibility: hidden;
}

.eyecatch-slider .slide.active {
    opacity: 1;
    visibility: visible;
}

/* Ensure text content, mask, and bottom content are layered on top of the slider */
.section-eyecatch .mask,
.section-eyecatch .container, /* This holds .inner and .catchcopy */
.section-eyecatch .bottom-content,
.section-eyecatch .slider-controls,
.section-eyecatch .slider-dots {
    position: relative; 
    z-index: 2; /* Higher z-index than .eyecatch-slider */
}
.section-eyecatch .container.modal_open{
	z-index:auto;
}

/* Specific z-index for controls if they need to be above other content within .section-eyecatch */
.section-eyecatch .slider-controls,
.section-eyecatch .slider-dots {
    z-index: 3; 
}


/* Slider Controls (Arrows) */
.slider-controls {
    position: absolute; /* Positioned relative to .section-eyecatch */
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;
}

.slider-controls button {
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 24px;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.6s ease;
}

.slider-controls button:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

/* Slider Dots (Indicators) */
.slider-dots {
    position: absolute; /* Positioned relative to .section-eyecatch */
    bottom: 30px; /* Adjust as needed, especially if .bottom-content is tall or also absolutely positioned */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
	justify-content: center;
}

.slider-dots .dot {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    margin: 0 6px;
    cursor: pointer;
    border: 1px solid rgba(0,0,0,0.2);
    transition: background-color 0.5s ease;
}

.slider-dots .dot.active {
    background-color: white;
    border-color: rgba(255,255,255,0.8);
}
@media (max-width: 1075px){
	.slider-dots {
		display: none;
	}
}


/* Adjustments for .bottom-content if it visually interferes with dots */
/* For example, if .bottom-content is absolutely positioned at the bottom, 
   you might need to increase the 'bottom' value of .slider-dots 
   or add padding-bottom to .section-eyecatch if .bottom-content is part of the normal flow. 
   Given .bottom-content is likely already styled, this might need specific tuning based on its current CSS. 
   The current JS logic places .slider-dots directly into .section-eyecatch, so its positioning is relative to that. 
*/

/* Ensure the main content padding adjustment from web-index.blade.php is respected */
/* main {padding-top:0 !important;} was in web-index.blade.php, might be better here or in a more global scope if always needed for this page type */


/*==============================================================
5.07 SubCommonDesign :   下層ページの共通デザイン
==============================================================*/

/*下層ページ2カラム表示
---------------------------------------*/
.twocolumnwrap{
	display: flex;
}
.twocolumnwrap .maincolumn{
	width:calc(100% - 285px);
	/* padding:30px; */
	margin-right:30px;
}
.twocolumnwrap .subcolumn{
	background-color: #fff;
	padding:20px;
	width:285px;
	font-family: 'Barlow',-apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
}
.twocolumnwrap .subcolumn .link li{
	line-height:1;
}
.twocolumnwrap .subcolumn .link .ja{
	font-size:15px;
	margin-right:12px;
}
.twocolumnwrap .subcolumn .link a{
	display:block;
	padding:20px;
}
.twocolumnwrap .subcolumn .section-banner a{
	margin-bottom:23px;
	line-height:1;
}
.twocolumnwrap .subcolumn .section-banner img{
	max-width:37px;
}
.twocolumnwrap .subcolumn .section-banner h4{
	font-size:12px;
}
.twocolumnwrap .subcolumn .section-banner .en{
	font-size: 11px;
	font-weight:100;
	margin-top:5px;
}

@media (max-width: 991px){
	.twocolumnwrap{
		display:block;
	}
	.twocolumnwrap .maincolumn{
		width:100%;
		margin:0;
		padding:0;
		border:none;
	}
	.twocolumnwrap .subcolumn{
		width:100%;
		max-width:none;
		margin:50px auto 0;
	}
}

/*下層ページアイキャッチ
---------------------------------------*/
.sub-page .section-eyecatch{
	height:373px;
	display:flex;
	align-items:center;
	position:relative;
	background-repeat: no-repeat;
	background-position: center;
	background-size:cover;
	background-image: url("../image/web/eyecatch-header/top-eyecatch-01.png");
}
.sub-page .section-eyecatch .mask{
	background-color:#000;
	opacity:.5;
	position:absolute;
	width:100%;
	height:100%;
	top:0;
}
.sub-page .section-eyecatch .page-title{
	position:relative;
	color:#fff;
}
.sub-page .section-eyecatch .page-title span{
	display:block;
}
.sub-page .section-eyecatch .page-title .sub{
	font-size:17px;
}
.sub-page .section-eyecatch .page-title .main{
	font-size:39px;
	font-weight:100;
	letter-spacing:.15em;
}
@media (max-width: 991px){
	.sub-page .section-eyecatch{
		height:200px;
	}
}

/*単純案内ページ系　白背景コンテンツエリア
---------------------------------------*/
.contentarea_f{
	background-color:#fff;
	color:#313131;
	padding: 25px 15px;
	/* margin-bottom: 50px; */
}
.contentarea_f h2,
.contentarea_f h3,
.contentarea_f h4,
.contentarea_f h5,
.contentarea_f h6{
	font-size: 17px;
}
.contentarea_f a:not(.btn){
	color:#800000;
	text-decoration: underline;
}
@media (max-width: 991px){
	.contentarea_f{
		padding: 22px 24px;
	}
}

/*single
---------------------------------------*/
.page-single .singleheader h2{
	margin:0;
}
.page-single .singleheader{
	margin-bottom: 50px;
	align-items:center;
}
.page-single-nav{
	border-top: 1px solid #313131;
	padding-top:20px;
	margin-top:50px;
}

/*contact / mail
---------------------------------------*/

/*==============================================================
5.08 SubDesign       :   それ以外のページごとの個別設定
                         各ページ内で<div class="page-xxxx">（xxxxは各ページ名）
                         を記述して、それを元に区別
==============================================================*/

/*guide
---------------------------------------*/
.page-guide .section-eyecatch{
	background-image: url("../image/web/eyecatch-header/top-eyecatch-01.png");
}
.steps-container {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	position: relative;
	margin-bottom: 20px;
}

.step {
	flex: 1;
	text-align: center;
	position: relative;
}
.step + .step {margin-left: 16px;}
.step h4 {
	font-size:20px;
	color:#fff;
	background: linear-gradient(90deg, #0E1666 0%, #131D83 25%, #131D83 50%, #0B156D 75%);
	padding: 20px 14px;
    border-radius: 8px;
	margin-bottom:12px;
	text-align: left;
}

.step-header {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 30px;
	position: relative;
}

.step-circle {
	width: 90px;
	height: 40px;
	background-color: #091369;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-weight: bold;
	font-size: 12px;
	position: relative;
	z-index: 2;
	padding:30px 0;
}

.steps-container > .step:not(:last-child) .step-circle::after {
	content: '';
	position: absolute;
	right: -60%;
	top: 50%;
	transform: translateY(-50%);
	width: 60%;
	height: 2px;
	background-color: #091369;
	z-index: 1;
}

.steps-container > .step:not(:last-child) .step-circle::before {
	content: '';
	position: absolute;
	right: -60%;
	top: 50%;
	transform: translateY(-50%);
	width: 12px;
	height: 12px;
	border-right: 2px solid #091369;
	border-top: 2px solid #091369;
	transform: translateY(-50%) rotate(45deg);
	z-index: 3;
}

.step-content {
	background-color:#F3F4F6;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 10px;
	text-align: left;
	min-height: 300px;
	position: relative;
	overflow: hidden;
}

.step-content::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background-color: #091369;
	box-shadow: 2px 0 4px rgba(30, 58, 138, 0.2);
}

.step-icon {
	width:30px;
	height: auto;
	margin-bottom: 15px;
	width: 100%;
}
.step-icon img {
	width: 30px;
	height: auto;
	margin:0 auto;
}

.step-title {
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 15px;
	text-align: center;
	color:#091369;
}

.step-description {
	font-size: 12px;
	line-height: 1.6;
	color: #555;
	letter-spacing: normal;
	font-weight: normal;
}

.step-description ul {
	list-style: none;
	padding: 0;
}

.step-description li {
	margin-bottom: 8px;
	position: relative;
	padding-left: 16px;
}

.step-description li:before {
	content: '•';
	position: absolute;
	left: 0;
	color: #666;
}

.sub-note {
	font-size: 11px;
	color: #666;
	margin-top: 10px;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}
.sub-note span {
	background: #fff;
	border:1px solid #e0e0e0;
	padding:2px 4px;
}

.payment-icons {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 10px;
}

.payment-icon {
	width: 30px;
	height: 20px;
	background-color: #ddd;
	border-radius: 4px;
}

@media (max-width: 991px) {
	.page-guide .contentarea_f {padding: 18px;}
	.steps-container {
		flex-direction: column;
	}
	
	.step {
		margin-bottom: 40px;
		width: 100%;
	}
	.step:first-child {margin-top: 20px;}

	.step + .step {margin-left:0;}
	
	.step-header {margin-bottom: 16px;}
	.step-header::after,
	.step-header::before {
		display: none;
	}

	.step-content {min-height: auto;}

	.steps-container > .step:not(:last-child) .step-circle::after {
		display: none;
	}
	
	.steps-container > .step:not(:last-child) .step-circle::before {
		display: none;
	}
}
/* 準備 */
.prepare-container {
	max-width: 1200px;
	margin: 0 auto 40px;
	background: white;
	border-radius: 12px;
}

.prepare-main-sections {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px;
	margin-bottom: 40px;
}

.prepare-section {
	background: white;
	padding: 16px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	border: 1px solid #e0e0e0;
}
.prepare-section + .prepare-section {margin-left: 20px;}

.prepare-section-header {
	display: flex;
	align-items: center;
}

.prepare-icon-circle img {
	width: 40px;
	height: auto;
}

.prepare-section-title h2 {
	font-size: 18px;
	color: #091369;
	margin-bottom: 4px;
	font-weight: 600;
	margin-left:12px;
}
.prepare-section-title h2 div {
	width: 50px;
	border-bottom: 3px solid #091369;
}

.prepare-section-title-en {
	font-size: 12px;
	color: #666;
	text-align: left;
	letter-spacing: normal;
	font-weight: normal;
	margin: 20px 0;
}

.prepare-item {
	display: flex;
	align-items: center;
	margin-bottom: 24px;
	padding: 8px;
	position: relative;
	background:#F3F4F6;
	border-radius: 4px;
	overflow: hidden;
}
.prepare-item::before{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background-color: #091369;
	box-shadow: 2px 0 4px rgba(30, 58, 138, 0.2);
}

.prepare-item-icon {
	margin: 0 8px 0 4px;
	flex-shrink: 0;
}
.prepare-item-icon img {
	width: 30px;
	height: auto;
}
.prepare-item-content {text-align: left;}
.prepare-item-content h3 {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 4px;
}

.prepare-item-content p {
	font-size: 12px;
	color: #666;
	line-height: 1.5;
	font-weight: normal;
	letter-spacing: normal;
}

.prepare-notes-section {
	background: #f8f8f8;
	padding: 30px;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
}

.prepare-notes-header {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}

.prepare-notes-icon {
	width: 32px;
	height: 32px;
	background-color: #333;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	margin-right: 12px;
	font-size: 16px;
}

.prepare-notes-header h2 {
	font-size: 16px;
	font-weight: 600;
}

.prepare-notes-list {
	list-style: none;
}

.prepare-notes-list li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 8px;
	font-size: 13px;
	line-height: 1.6;
	text-align: left;
}

.prepare-notes-list li:before {
	content: "•";
	position: absolute;
	left: 0;
	font-weight: bold;
}

/* Icons using CSS */
.prepare-doc-icon:before {
	content: "📄";
}

.prepare-id-icon:before {
	content: "🪪";
}

.prepare-card-icon:before {
	content: "💳";
}

.prepare-passport-icon:before {
	content: "📘";
}

.prepare-permit-icon:before {
	content: "📋";
}

.prepare-translate-icon:before {
	content: "📑";
}

@media (max-width: 991px) {
	.prepare-main-sections {
		grid-template-columns: 1fr;
	}
	
	.prepare-section {
		padding: 30px 20px;
		margin-top:40px;
		width: 100%;
	}
	.prepare-section + .prepare-section {margin-left:0;}
}
/* 返却 */
.flow-container {
	max-width: 1200px;
	margin: 0 auto;
	background: white;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 貸出受付の流れ */
.flow-rental-section {
	padding: 20px;
}

.flow-section-title {
	font-size: 16px;
	font-weight: 600;
	color: #091369;
	margin-bottom: 30px;
	padding-left: 10px;
	border-left: 4px solid #091369;
	text-align: left;
}

.flow-steps {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 20px;
	margin-bottom: 30px;
}

.flow-step {
	border-radius: 8px;
	padding: 10px;
	position: relative;
	transition: all 0.3s ease;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	border: 1px solid #e0e0e0;
}

.flow-step:hover {
	box-shadow: 0 4px 12px rgba(9, 19, 105, 0.1);
	transform: translateY(-2px);
}

.flow-step-number {
	width: 24px;
	height: 24px;
	background-color: #091369;
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	margin-bottom: 12px;
	font-size:12px;
}

.flow-step-icon img {
	width: 24px;
	height: auto;
}

.flow-step-title {
	font-size: 14px !important;
	font-weight: 600;
	margin: 8px 0;
	color: #091369;
	letter-spacing: normal;
	text-align: left;
}

.flow-step-description {
	font-size: 12px;
	color: #666;
	line-height: 1.5;
	letter-spacing: normal;
	font-weight: normal;
	text-align: left;
}

/* 矢印 */
.flow-step:not(:last-child)::before {
    content: '';
    position: absolute;
    right: -13px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-right: 2px solid #091369;
    border-top: 2px solid #091369;
    transform: translateY(-50%) rotate(45deg);
    z-index: 3;
}

/* 注意書き */
.flow-note {
	background: #e6e7ee;
	padding: 16px 20px;
	display: flex;
	align-items: center;
	font-size: 13px;
	color: #091369;
	border-left: 4px solid #091369;
}
.flow-note-icon {
	margin-right: 10px;
	font-size: 16px;
}
.flow-note-icon img{
	width: 24px;
	height: auto;
}

/* 返却の流れ */
.flow-return-section {
padding:20px;
}

.flow-return-steps {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	max-width: 600px;
}

.flow-return-step {
	background: white;
	border-radius: 8px;
	padding: 10px;
	position: relative;
	transition: all 0.3s ease;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	border: 1px solid #e0e0e0;
}
/* 矢印 */
.flow-return-step:not(:last-child)::before {
    content: '';
    position: absolute;
    right: -13px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-right: 2px solid #091369;
    border-top: 2px solid #091369;
    transform: translateY(-50%) rotate(45deg);
    z-index: 3;
}

.flow-return-step:hover {
	box-shadow: 0 4px 12px rgba(9, 19, 105, 0.1);
}

/* レスポンシブ対応 */
@media (max-width: 991px) {
	.flow-steps {
		grid-template-columns: 1fr;
	}
	
	.flow-step {margin-bottom:40px;}
	.flow-step:nth-child(3)::after {
		display: none;
	}
	.flow-step:not(:last-child)::before {
		right: unset;
		top: unset;
		bottom: -40px;
		transform: translateY(-50%) rotate(135deg);
	}
	.flow-step:nth-child(2n)::after {
		display: none;
	}
	
	
	.flow-return-steps {
		max-width: none;
		grid-template-columns: 1fr;
	}
	.flow-return-step {margin-bottom:40px; width: 100%;}
	.flow-return-step:not(:last-child)::before {
		right: unset;
		top: unset;
		bottom: -40px;
		transform: translateY(-50%) rotate(135deg);
	}

}

@media (max-width: 480px) {
	.flow-steps {
		grid-template-columns: 1fr;
	}
	
	.flow-step::after {
		display: none;
	}
	
}

/*lineup
---------------------------------------*/
.page-lineup .section-eyecatch{
	background-image: url("../image/web/eyecatch-header/top-eyecatch-02.png");
}
.page-lineup .lineup_main .inner{
	background-color:#fff;
	padding:20px;
	padding-bottom:0;
	height: -webkit-fill-available;
	border:1px solid #C5C5C5;
	border-radius: 8px;
}
.page-lineup .lineup_main [class*="col-"]{
	margin-bottom: 14px;
}
.page-lineup .lineup_main h4{
	font-size:13px;
	font-weight:bold;
	letter-spacing: normal;
	text-align: left;
}
.page-lineup .lineup_main dl{
	font-size: .9em;
	padding-top:11px;
	padding-bottom:11px;
	border-top:1px solid #C5C5C5;
	margin: 15px auto 0;
	max-width: 21em;
}
.page-lineup .lineup_main dl .group{
	display:flex;
	justify-content: space-between;
	align-items: center;
	margin:8px 0;
	min-height: 18px;
}
.page-lineup .lineup_main dl hr{
	margin: 0 .2em;
	border-top: 1px solid #848484;
	width: 100%;
	max-width: 28px;
}
.page-lineup .lineup_main dt{
	width:100%;
	text-align:left;
	max-width: 8em;
}
.page-lineup .lineup_main dd{
	width:100%;
	max-width: 7em;
	text-align:right;
}
.page-lineup .lineup_main dl .blank{
	background-color:#fff;
	width: 25px;
	height:3px;
	margin:auto;
}

/*空車を探す
--------------------------------------*/

.sub-page.page-car_search .section-eyecatch{
	height: auto;
	padding: 0;
}

.sub-page.page-car_search .section-eyecatch h1{
	margin-bottom: 30px;
}
.sub-page.page-car_search .section-eyecatch .barlow{
	font-size: 16px;
}

.sub-page.page-car_search .section-eyecatch .mask{


}

/*キャンペーン
---------------------------------------*/

/*店舗情報
---------------------------------------*/
.page-shop .section-eyecatch{
	background-image: url("../image/web/eyecatch-header/top-eyecatch-01.png");
}
.page-shop .table-base th{
	width:6em;
}

/*会社情報
---------------------------------------*/
.page-company th{
	width:8em;
}

/*よくあるご質問
---------------------------------------*/
.page-faq .contentarea_f{
	padding: 26px 46px 46px;
}
.page-faq .section-title {
	font-size: 20px;
    color: #fff;
    background: linear-gradient(90deg, #0E1666 0%, #131D83 25%, #131D83 50%, #0B156D 75%);
    padding: 20px 14px;
    border-radius: 8px;
    margin-bottom: 12px;
	margin-top:40px;
}
.page-faq .faq-section:first-child .section-title {
	margin-top:0;
}

.page-faq dl{
	line-height:1.7em;
}
.page-faq dl .group{
	border-bottom:1px solid #e5e4e5;
	padding: 18px 0 19px;
}
.page-faq .group > *{
	margin-left:2.5em;
	text-indent:-2.5em;
}
.page-faq .group > *::before{
	font-family:'Barlow', sans-serif;
	font-weight:bold;
	font-size:20px;
	margin-right:.5em;
}
.page-faq dt:before{
	content:"Q.";
	color:#840000;
}
.page-faq dd:before{
	content:"A.";
	color:#002384;
}
.page-faq dd{
	margin-top: 9px;
}
.page-faq li{
	line-height:1.7em;
}
.page-faq .marker-note > li,
.page-faq .marker-disk > li{
	margin-left: 1.1em;
}
.page-faq .marker-num > li{
	text-indent:-1.3em;
	margin-left: 1.3em;
}
.page-faq .marker-num > li::before{
	color:#313131;
	font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
	font-weight:normal;
	font-size:1em;
}
.page-faq dl ul,
.page-faq dl ol{
	padding-top:11px;
}

/* お客様の声
---------------------------------------*/
.page-voice .voicebox {
	padding:20px;
	margin-bottom:20px;
}
.page-voice .voicebox .left{
	display: flex;
	align-items: center;
	width: 60px !important;
    min-width: 60px;
    max-width: 60px;
	margin-right:20px;
}
.page-voice .voicebox .left .voice-icon{
	width:100%;
	height: auto;
}
.page-voice .voicebox .right h4 {
	font-size:15px;
}
.page-voice .voicebox .right p {
	font-size:13px;
	font-weight: normal;
}
.page-voice .voicebox .right a {
	color:#000;
	text-decoration:none;
	border-bottom:1px solid #000;
}
.page-voice .page-single-nav a {text-decoration: none; color:#000;}


	

/*お問合せ
---------------------------------------*/
.page-contact th{
	width: 17em;
}
.page-contact th .inner{
	display: flex;
	align-items: center;
	line-height: 1.4;
}
.page-contact .btn{
	cursor:pointer;
	position:relative;
	min-height: 47px;
	max-width:200px;
	margin: 0;
}
.page-contact .btn.back::after{
	content:"\f053";
	right:auto;
	left:14px;
}
.page-contact .btn:hover{
	opacity:.8;
}
.page-contact input[type="submit"],
.page-contact input[onclick]{
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	background-color:transparent;
	text-align:left;
	padding-left: 20px;
}
.page-contact input[onclick]{
	left:auto;
	text-align: right;
	right:0;
	padding-right:20px;
}

/*料金システム・オプション
---------------------------------------*/
.page-system .section-eyecatch{
	background-image: url("../image/web/eyecatch-header/top-eyecatch-01.png");
}
.page-system .section-title{
	background: linear-gradient(90deg, #0E1666 0%, #131D83 25%, #131D83 50%, #0B156D 75%); 
	color: #fff;
	padding:20px;
	border-radius: 6px;
	margin-bottom: 0;
}
.page-system .section-title .ja {color:#fff;}
.page-system .contentarea_f {
	padding:20px;
	margin-bottom:0;
}
.page-system .maincolumn {padding:20px;}
.page-system .maincolumn section:not(:first-child) {margin-top:40px;}
.page-system .marker-disk li,
.page-system .marker-note li{
	margin-left: 1.1em;
}
.page-system table{
	border-top: 1px solid #e8e8e8;
}
.page-system th{
	width:10em;
}
.page-system .charge th{
	width:50%;
}
.page-system .section-comp th{
	width:6.5em;
	padding-right:0.5em;
}
.page-system .section-comp tr td:nth-of-type(1){
	width:7em;
	padding-left:0;
	vertical-align:top;
}
.page-system .section-comp tr td:nth-of-type(2){
	padding-left:0.5em;
}
.page-system ul.price{
	margin:0 -5px;
}
.page-system ul.price li{
	
}

/*ご利用の前に必ずお読みください
---------------------------------------*/
.page-attention .section-title{
	font-size: 20px;
    color: #fff;
    background: linear-gradient(90deg, #0E1666 0%, #131D83 25%, #131D83 50%, #0B156D 75%);
    padding: 20px 14px;
    border-radius: 8px;
    margin-bottom: 12px;
	margin-top:40px;
}
.page-attention .attention-section:first-child .section-title {
	margin-top:0;
}
.page-attention .section-title .ja {color:#fff;}
.page-attention .section-title .en {color:#fff;}

.page-attention .checklist{
	border:1px solid #d12321;
	padding:30px 35px;
}
.page-attention .checklist h4{
	font-size:20px;
}
.page-attention .checklist p{
	margin:5px 0;
	margin-left:1.3em;
}
.page-attention .marker-note > li,
.page-attention .marker-disk > li,
.page-attention .marker-num > li{
	margin-left: 2.1em;
}
.page-attention .marker-num > li::before{
	color:#313131;
	font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
	font-weight:normal;
	font-size:1em;
}

/*サイトマップ
---------------------------------------*/
.page-sitemap .marker-disk a{
	font-size:14px;
	line-height:2em;
}

img.logo{
	height: 45px;
}

/*クーポンあーカイブ
---------------------------------------*/

.br{
	margin-bottom: 15px;
	display: block;
}
.coupon-list{

}
.coupon-list li{
	display: block;
	border-bottom: 1px solid #eee;
	padding-top: 5px;
	padding-bottom: 5px;
}



.coupon-list li .flex{
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.coupon-list li h4{
	display: block;
	font-size: 16px;
}

.coupon-list li figure{
	margin-right: 20px;
	background-color: #fff;
}

.coupon-list li .discount{
	background-color: #dd2525;
	color: #fff;
	padding: 3px 5px;
	font-size: 12px;
	margin-right: 5px;
	font-family: monospace;
}

.coupon-list li time{
	font-size: 12px;
}


.coupon-list li .btn:after{
	content: none;
}

@media (max-width: 991px){

	.coupon-list li figure{
		width: 55px;
		height: 55px;
		overflow: hidden;
		margin-right: 2%;
	}
	.coupon-list li .txt{
		width: 54%;
		padding-right: 1%;
	}
	.coupon-list li h4{
		font-size: 14px;
	}

	.usecoupon{
		width: 35%;
	}
	.coupon-list li time{
		display: block;
	}

}

.page404{
	padding: 60px 0;
	text-align: center;
}