@charset "UTF-8";
/*
 * cmn_layout.css
 *
 */

 /* !変数定義
---------------------------------------------------------- */
:root {
	--main-color: #2D98FF;     /* メインカラー */
	--second-color: #7095B2;     /* セカンドカラー */
	--accent-color: #73FAC9;     /* アクセントカラー */
	--base-font-color: #223232;     /* 基本フォントカラー */
	--base-font-size: 16px;    /* 基本フォントサイズ */
	--font-weight-normal: 400;    /* 本文フォントウェイト */
	--font-weight-bold: 700;    /* 見出しフォントウェイト */
	--font-family-en: "Readex Pro", sans-serif;    /* 英数字フォント */
}

/* !HTML5 elements
---------------------------------------------------------- */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
{ display: block;}

/* !Reseting
---------------------------------------------------------- */
body {
	font-family: 'Noto Sans JP', "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3" , "Hiragino Kaku Gothic ProN" , 'メイリオ' ,Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic" , Verdana, Arial, Helvetica, sans-serif;
	font-size: var(--base-font-size);
	font-weight: var(--font-weight-normal);
	-webkit-text-size-adjust: none;
	line-height: 2;
	color: var(--base-font-color);
}

@media screen and (max-width:1039px){
body {
	font-size: 15px;
}
}

@media screen and (max-width:767px){
body {
	font-size: 14px;
}
}

body, div, pre, p, blockquote, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, th, td, figure, figcaption
{ margin: 0; padding: 0;}

input, textarea
{ margin: 0; font-size: 100%;}

label
{ cursor: pointer;}

table
{ border-collapse: collapse; border-spacing: 0; font-size: 100%;}

fieldset, img
{ border: 0;}

img
{ max-width: 100%; height: auto; vertical-align: top;}

address, caption, cite, code, dfn, em, th, var
{ font-style: normal; font-weight: normal;}

ol, ul
{ list-style: none;}

caption, th
{ text-align: left;}

h1, h2, h3, h4, h5, h6
{ font-size: 100%; font-weight: normal;}

q:after, q:before
{ content:'';}

a
{ cursor: pointer; }

a, input
{ outline: none; }

input, textarea
{ border-radius: 0; font-family: 'Noto Sans JP', "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3" , "Hiragino Kaku Gothic ProN" , 'メイリオ' ,Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic" , Verdana, Arial, Helvetica, sans-serif;}

input[type="button"],input[type="submit"],input[type="reset"]
{ -webkit-appearance: none; appearance: none; background: none; border: none; padding: 0; cursor: pointer;}

abbr, acronym
{ border: 0;}
*
{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}

/* !Layout
---------------------------------------------------------- */
html { overflow-y: scroll;}
body { 
	text-align: left;
	position:relative;
}

/* !Loading
---------------------------------------------------------- */
#loading {
  width: 100vw;
  height: 100vh;
  transition: all 1.4s 0.6s;
  background-color: #FFF;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
}

.loaded {
  opacity: 0;
  visibility: hidden;
}

/* !header
---------------------------------------------------------- */
.header {
    width: 100%;
    height: 90px;
    background: rgba(255, 255, 255, 1);
    margin: 0 auto;
    z-index: 100;
    position: fixed;
    top: 0;
    left: 0;
    transition: .25s;
}
.header.transform {
	height: 70px;
    background: rgba(255, 255, 255, 1);
}

.header__logo a {
    display: block;
    position: absolute;
    width: 314px;
    height: 39px;
    background: url("../img/h_logo.png") 0 0 no-repeat;
    background-size: 314px 39px;
    text-indent: -9999px;
    top: 26px;
    left: 30px;
	transition: .25s;
    z-index: 302;
}
.header.transform .header__logo a {
    top: 16px;
}

@media screen and (max-width: 1039px) {
    .header {
        height: 70px;
    }

    .header .header__logo a {
        top: 16px;
        left: 20px;
    }

    /* 重なり順の整理 */
    .header-nav { /* BEM化したnav */
        z-index: 302;
    }
    .header__panel-btn { /* BEM化したボタン */
        z-index: 400;
    }
}

@media screen and (max-width: 767px) {
    .header {
        height: 60px;
    }
	.header.transform {
		height: 60px;
	}

    .header .header__logo a {
        width: 240px;
        height: 30px;
        background-size: 240px 30px;
        top: 15px;
        left: 20px;
        z-index: 301;
    }

    .header.transform .header__logo a {
		top: 15px;
	}
}

@media screen and (max-width:359px){
}

/* !ヘッダーナビ
---------------------------------------------------------- */
.header-nav {
    position: absolute;
    width: 100%;
    height: 90px;
    font-size: 0;
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: flex-end;
    top: 0;
    right: 0;
	padding-right:30px;
    z-index: 301;
}
	header.transform .header-nav {
		height: 70px;
	}

.header-nav__item {
    display: inline-block;
    text-align: center;
}

.header-nav__link {
    display: block;
    font-size: var(--base-font-size);
    font-weight: var(--font-weight-bold);
    padding: 0 24px;
    line-height: 90px;
    color: var(--base-font-color);
    transition: .6s;
    position: relative;
    text-decoration: none;
	transition: .25s;
}
	.header.transform .header-nav__link {
		line-height: 70px;
	}

.header-nav__link:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 2px;
    background: var(--main-color);
    bottom: 0;
    left: 0;
    opacity: 0;
    transition: .6s;
}

/* Hover & Current State */
.header-nav__link:hover:before,
.header-nav__link.current:before {
    opacity: 1;
}

.header-nav__item:hover > .header-nav__link {
    color: var(--main-color);
}

/* Modifier: Contact Button */
.header-nav__link--contact {
    color: #fff !important;
    height: 50px;
    line-height: 50px;
    background: var(--main-color);
    border-radius: 4px;
	padding: 0 30px;
    margin-top: 20px; /* PC中心合わせ */
	margin-left: 24px;
	transition: background-color .6s ease, margin-top 0.3s ease;
}
.header-nav__link--contact:before {
	display: none;
}
.header-nav__link--contact:hover {
    background-color: var(--accent-color);
}
	.header.transform .header-nav__link--contact {
		margin-top: 10px;
		height: 50px;
		line-height: 50px;
	}

/* --- Element: header-nav__child (Dropdown) --- */
.header-nav__child {
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    padding: 40px 4%;
    color: var(--base-font-color);
    background: rgba(255, 255, 255, 1);
    border-top: 1px solid #EEE;
    visibility: hidden;
    opacity: 0;
    transition: .6s;
}

.header-nav__item:hover .header-nav__child {
    visibility: visible;
    opacity: 1;
}

.header-nav__child-wrapper {
    width: 100%;
    max-width: 1200px;
	margin:0 auto;
	display: flex;
	align-items: center;
}

.header-nav__child-ttl {
	width:25%;
    font-size: 32px;
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
    letter-spacing: 0.04em;
    text-align: left;
}

.header-nav__child-ttl-en {
	display: block;
	font-family: var(--font-family-en);
    font-size: 18px;
    color: var(--main-color);
}

.header-nav__child-list {
	width:75%;
	border-left:1px solid #ddd;
	padding-left:50px;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}

.header-nav__child-item {
    width: 33.33%;
    text-align: left;
	margin: 6px 0;
}

.header-nav__child-link {
    display: block;
    font-size: 14px;
	font-weight: var(--font-weight-bold);
	line-height: 1.6;
    position: relative;
    text-decoration: none;
    color: inherit;
	padding:6px 0 6px 30px;
}

.header-nav__child-link:hover,
.header-nav__child-link.current {
    color: var(--second-color);
    transition: .6s;
}

.header-nav__child-link:before {
    display: none;
}

/* 矢印の外枠（丸）とベース */
.header-nav__arrow {
    display: block;
    position: absolute;
	width:20px;
	height: 20px;
	border-radius: 50%;
	border:1px solid var(--accent-color);
	background: var(--accent-color);
    top: 8px;
    left: 0;
    transition: .3s;
	transform: scale(0.3);
}
	.header-nav__arrow span {
		position: relative;
		display: inline-block;
		width: 8px;
		height: 1px;
		margin: 2.1px 0;
		border-radius: 9999px;
		background-color: var(--accent-color);
		top:-6px;
		left:5px;
		transition: .6s;
	}
		.header-nav__arrow span::before,
		.header-nav__arrow span::after {
			content: "";
			position: absolute;
			top: calc(50% - 0.5px);
			right: 0;
			width: 4px;
			height: 1px;
			border-radius: 9999px;
			background-color: var(--accent-color);
			transform-origin: calc(100% - 0.5px) 50%;
			transition: .6s;
		}
			.header-nav__arrow span::before {
				transform: rotate(45deg);
			}
			.header-nav__arrow span::after {
				transform: rotate(-45deg);
			}
.header-nav__child-link:hover .header-nav__arrow {
	background: #FFF;
	transform: scale(1);
}
	.header-nav__child-link:hover .header-nav__arrow span {
		background-color: var(--accent-color);
	}
		.header-nav__child-link:hover .header-nav__arrow span::before,
		.header-nav__child-link:hover .header-nav__arrow span::after {
			background-color: var(--accent-color);
		}

.header-nav__child-link.current .header-nav__arrow {
	background: var(--accent-color);
	transform: scale(0.3);
}

#panel-btn {
    display: none;
}

@media screen and (max-width: 1039px) {
    .header-nav {
        justify-content: center;
        width: 60%;
        height: 100%;
        position: fixed;
        top: 0;
        right: -60%;
        padding: 150px 50px 50px 50px;
        color: #FFF;
        background: var(--second-color); /* モバイル背景をアクセントカラーへ */
        overflow-y: auto;
        text-align: center;
        transition: .6s;
        display: block;
    }
		header.transform .header-nav {
			height: 100%;
		}

    .header-nav__item {
        display: block;
        width: 100%;
        font-size: 18px;
        letter-spacing: 0.08em;
    }

    .header-nav__link {
        padding: 0;
        color: #FFF;
        line-height: 60px;
        border-top: 1px solid rgba(255,255,255,0.12);
    }
		.header.transform .header-nav__link {
			line-height: 60px;
		}

    .header-nav__link:before {
        display: none;
    }

    /* Hover/Current state on mobile */
    .header-nav__item:hover > .header-nav__link,
    .header-nav__link.current {
        color: #FFF;
    }

	/* Modifier: Contact Button */
	.header-nav__link--contact {
		color: var(--second-color) !important;
		height: 60px;
		line-height: 60px;
		background: #FFF;
		border-radius: 4px;
		padding: 0;
		margin-top: 0; /* PC中心合わせ */
		margin-left: 0;
		transition: none;
		border: 1px solid #FFF;
	}
	.header-nav__link--contact:hover {
		background-color: #FFF;
		border: 1px solid #FFF;
	}
		.header.transform .header-nav__link--contact {
			margin-top: 0;
			height: 60px;
			line-height: 60px;
		}

    /* 親リンクの土台（ここを基準にする） */
    .header-nav__link--parent {
        position: relative;
        display: block;
        /* ↓ 左右の余白を同じにすることでテキストを中央に配置 */
        padding-left: 50px; 
        padding-right: 50px; 
        text-align: center;
        box-sizing: border-box; /* 余白を含めた幅計算にする */
        text-decoration: none ;
    }

    /* ＋ーの共通設定 */
    .header-nav__link--parent::before,
    .header-nav__link--parent::after {
        content: "" ;
        display: block ;
        position: absolute ;
        background-color: #FFF ; /* 線の色 */
        top: 50% ;
        right: 25px ;
        /* ★重要：PC版の opacity:0 を上書きして強制表示 */
        opacity: 1 ; 
        visibility: visible ;
        transition: transform 0.3s ease, opacity 0.3s ease ;
        /* PC版の下線用設定をリセット */
        width: auto;
        height: auto;
        bottom: auto ;
        left: auto ;
    }

    /* 横棒（ー） */
    .header-nav__link--parent::before {
        width: 16px ;
        height: 2px ;
        margin-top: -1px ;
        transform: rotate(0deg) ;
    }

    /* 縦棒（｜） */
    .header-nav__link--parent::after {
        width: 2px ;
        height: 16px ;
        margin-top: -8px ;
        /* 横棒のセンター(16px/2=8px)に合わせるため調整 */
        right: 32px ; 
        transform: rotate(0deg) ;
    }

    /* --- 開いた時 (is-open) の挙動 --- */
    /* 縦棒を回転させて消す */
    .header-nav__link--parent.is-open::after {
        transform: rotate(90deg) ;
        opacity: 0 ;
    }

    /* 横棒を回転させる */
    .header-nav__link--parent.is-open::before {
        transform: rotate(180deg) ;
        opacity: 1 ; /* 開いても消さない */
    }

    /* --- ホバー時の干渉を完全に遮断 --- */
    .header-nav__item:hover > .header-nav__link--parent::before {
        opacity: 1 ;
        background-color: #FFF ;
    }

	/* --- 子メニュー --- */
    .header-nav__child {
		/* 1. transitionを削除（jQueryと干渉するため） */
        transition: none; 
        /* 2. 初期状態を非表示に（JSのslideToggleと合わせる） */
        display: none; 
        /* 3. visibilityとopacityは不要になるのでリセット */
        visibility: visible;
        opacity: 1;
        width: 100%;
        position: static;
        padding: 15px 0;
        color: #FFF;
        background: none;
        visibility: visible;
        opacity: 1;
        border-top: 0;
    }

    .header-nav__child-ttl {
        display: none;
    }

	.header-nav__child-list {
		width:100%;
		border-left:none;
		padding-left:0;
	}

    .header-nav__child-item {
        width: 100%;
		margin: 0;
    }

    .header-nav__child-link {
        font-size: 14px;
        padding: 10px 0 10px 30px;
        color: #FFF;
    }
	.header-nav__child-link:hover {
		color: #FFF;
	}
	.header-nav__child-link.current {
		color: #FFF;
	}
	/* 矢印の外枠（丸）とベース */
	.header-nav__arrow {
		border:none;
		top: 12px;
		transform: scale(1);
		background: #FFF;
	}
		.header-nav__arrow span {
			background-color: var(--second-color);
			top:-5px;
			left:6px;
		}
			.header-nav__arrow span::before,
			.header-nav__arrow span::after {
				background-color: var(--second-color);
			}
	.header-nav__child-link:hover .header-nav__arrow {
		background: #FFF;
	}
		.header-nav__child-link:hover .header-nav__arrow span {
			background-color: var(--second-color);
		}
			.header-nav__child-link:hover .header-nav__arrow span::before,
			.header-nav__child-link:hover .header-nav__arrow span::after {
				background-color: var(--second-color);
			}
	.header-nav__child-link.current .header-nav__arrow  {
		background: #FFF;
	}
		.header-nav__child-link.current .header-nav__arrow span  {
			display: none;
		}

    /* Nav Open State */
    .open .header-nav {
        transform: translate3d(-100%, 0, 0);
    }

    /* Panel Button */
    /* ボタン外枠 */
    #panel-btn {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        width: 70px;
        height: 70px;
        background: var(--main-color);
        z-index: 400;
        cursor: pointer;
    }

    /* 三本線の真ん中 */
    #panel-btn-icon {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 24px;
        height: 2px;
        background: #FFF;
        transform: translate(-50%, -50%);
        transition: background 0.3s ease; /* 閉じる時に透明にする */
    }

    /* 三本線の上下 */
    #panel-btn-icon:before,
    #panel-btn-icon:after {
        content: "";
        display: block;
        position: absolute;
        width: 24px;
        height: 2px;
        background: #FFF;
        left: 0;
        transition: transform 0.3s ease, top 0.3s ease;
    }

    #panel-btn-icon:before { top: -8px; }
    #panel-btn-icon:after { top: 8px; }

    /* --- ボタンが押された時 (.open) のアイコン変形 --- */
    .open #panel-btn-icon {
        background: transparent !important; /* 真ん中の線を消す */
    }
    .open #panel-btn-icon:before {
        top: 0 !important;
        transform: rotate(45deg); /* 上の線を傾ける */
    }
    .open #panel-btn-icon:after {
        top: 0 !important;
        transform: rotate(-45deg); /* 下の線を傾ける */
    }
}

@media screen and (max-width: 767px) {
    .header-nav {
        width: 100%;
        right: -100%;
        padding: 120px 25px 30px 25px;
    }

    .header-nav__link { font-size: 16px; }
    .header-nav__child-link { font-size: 14px; }

    #panel-btn { width: 60px; height: 60px; }

a#panel-btn {
	width: 60px;
	height: 60px;
}
#panel-btn{
	width: 60px;
	height: 60px;
}
}

@media screen and (max-width: 360px) {
    .header-nav {
        padding: 100px 25px 30px 25px;
    }
}

/* !contents
---------------------------------------------------------- */
#contents {
	width:100%;
	position:relative;
	overflow: hidden;
}

/* !component
---------------------------------------------------------- */
.c-inner {
	width:100%;
	max-width: 1200px;
	margin: 0 auto;
}

p.c-lead:not(:first-child) {
	margin-top: 30px;
}

.c-title-en {
	position: relative;
	font-family: 'Readex Pro';
	font-weight: 500;
	font-size: 24px;
	line-height: 1.6;
	padding-left:30px;
}
	.c-title-en:before {
		position: absolute;
		content:"";
		width: 18px;
		height: 10px;
		background: var(--accent-color);
		top:50%;
		margin-top: -5px;
		left:0;
	}

.c-title {
	font-size:44px;
	font-weight: var(--font-weight-bold);
	line-height: 1.4;
}

.c-sub-title-en {
	position: relative;
	font-family: 'Readex Pro';
	font-weight: 500;
	font-size: 20px;
	line-height: 1.6;
	padding-left:26px;
}
	.c-sub-title-en:before {
		position: absolute;
		content:"";
		width: 14px;
		height: 8px;
		background: var(--accent-color);
		top:50%;
		margin-top: -4px;
		left:0;
	}

.c-sub-title {
	font-size:36px;
	font-weight: var(--font-weight-bold);
	line-height: 1.4;
	padding-right: 50px;
}

.c-sub-title2 {
	font-size:24px;
	font-weight: var(--font-weight-bold);
	line-height: 1.6;
	padding-left:0.6em;
	border-left:5px solid var(--main-color);
}

.c-sub-title3 {
	font-size:18px;
	font-weight: var(--font-weight-bold);
	line-height: 1.6;
	padding-left:20px;
	position: relative;
}
	.c-sub-title3::before {
		position: absolute;
		content: "";
		width: 10px;
		height: 10px;
		background: var(--main-color);
		top:10px;
		left:0;
	}

.c-sign {
	margin-top: 60px;
	text-align: right;
}

.c-icon-list {
	width:100%;
}

.c-icon-list__item {
	margin-top:20px;
	position: relative;
	padding-left:1em;
}
	.c-icon-list__item::before {
		position: absolute;
		content:"";
		width:6px;
		height: 6px;
		background: var(--main-color);
		border-radius: 50%;
		top:16px;
		left: 0;
	}

.c-icon-line-list {
	width:100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.c-icon-line-list__item {
	width:47%;
	position: relative;
	padding:1.2em 0 1.2em 1em;
	border-bottom: 1px solid #ddd;
}
	.c-icon-line-list__item::before {
		position: absolute;
		content:"";
		width:6px;
		height: 6px;
		background: var(--main-color);
		border-radius: 50%;
		top:34px;
		left: 0;
	}

.c-circle-list {
	width:100%;
}

.c-circle-list__item {
	list-style:circle;
	margin-left:1.2em;
}
.c-circle-list__item:not(:last-child) {
	margin-bottom: 10px;
}

.c-decimal-list {
	width:100%;
}

.c-decimal-list__item {
	list-style:decimal;
	margin-top:20px;
	margin-left:1em;
	padding-left:1em;
}

.c-alpha-list {
	width:100%;
}

.c-alpha-list__item {
	list-style:lower-alpha;
	margin-top:20px;
	margin-left:1em;
	padding-left:1em;
}

.c-numbering-list {
    counter-reset: sales-counter;
}

.c-numbering-list__item {
    position: relative;
    padding-left: 45px;
    margin-bottom: 25px;
    line-height: 1.8;
    display: flex;
    align-items: flex-start;
}

.c-numbering-list__item::before {
    counter-increment: sales-counter;
    content: counter(sales-counter);
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 28px;
    height: 28px;
    background-color: var(--main-color);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
	font-family: var(--font-family-en);
    font-size: 14px;
}

.c-numbering-list__item:last-child {
    margin-bottom: 0;
}

.c-table {
	width: 100%;
	border-collapse:collapse;
}
	.c-table th,
	.c-table td {
		padding: 1.6em 0;
		border-bottom: 1px solid #ddd;
	}
	.c-table th {
		vertical-align:top;
		font-weight: var(--font-weight-bold);
	}
	.c-table td {
		vertical-align:top;
	}
		.c-table td dl {
			width:100%;
			display: flex;
			flex-wrap: wrap;
		}
			.c-table td dl dt {
				width: 7em;
			}
			.c-table td dl dd {
				width: calc(100% - 7em);
			}

.c-txt-link {
	color: var(--main-color);
	text-decoration: underline;
	transition: all 0.6s ease;
}
.c-txt-link:hover,
.c-txt-link:active,
.c-txt-link:focus { text-decoration: underline;}
.c-txt-link:hover { opacity:0.7;}

.c-link-btn {
	position: relative;
	display: inline-block;
	padding:1.2em 5em 1.2em 0;
	border-bottom:1px solid #ddd;
	transition:.6s;
}
	.c-link-btn:hover {
		color:var(--second-color);
	}
.c-link-btn__arrow {
	position: absolute;
	width:30px;
	height: 30px;
	background: var(--accent-color);
	border:1px solid var(--accent-color);
	border-radius: 50%;
	right:10px;
	top:50%;
	margin-top: -15px;
	transform: scale(.3);
	transition: .3s;
	overflow: hidden;
	z-index: 4;
}
	a:hover .c-link-btn__arrow {
		border:1px solid var(--accent-color);
		background: #FFF;
		transform: scale(1);
	}
	.c-link-btn__arrow span {
		position: absolute;
		display: block; 
		width: 13px;
		height: 6px;
		background-color: var(--accent-color);
		-webkit-mask-image: url("../img/icon_arrow.svg");
		mask-image: url("../img/icon_arrow.svg");
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: contain;
		mask-size: contain;
		-webkit-mask-position: center;
		mask-position: center;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

.c-clear-both {clear: both;}

.c-align-center {text-align: center;}
.c-align-left {text-align: left;}
.c-align-right {text-align: right;}

.c-mt10 { margin-top: 10px   !important;}
.c-mt15 { margin-top: 15px   !important;}
.c-mt20 { margin-top: 20px   !important;}
.c-mt30 { margin-top: 30px   !important;}
.c-mt40 { margin-top: 40px   !important;}
.c-mt50 { margin-top: 50px   !important;}
.c-mt60 { margin-top: 60px   !important;}
.c-mt70 { margin-top: 70px   !important;}
.c-mt80 { margin-top: 80px   !important;}
.c-mt90 { margin-top: 90px   !important;}
.c-mt100 { margin-top: 100px   !important;}

@media screen and (max-width: 1039px) {
.c-title-en {
	font-size: 22px;
	padding-left:26px;
}
	.c-title-en:before {
		width: 16px;
		height: 8px;
		margin-top: -4px;
	}

.c-title {
	font-size:40px;
}

.c-sub-title-en {
	font-size: 18px;
	padding-left:26px;
}
	.c-sub-title-en:before {
		width: 14px;
		height: 8px;
		margin-top: -4px;
	}

.c-sub-title {
	font-size:32px;
}

.c-sub-title2 {
	font-size:22px;
}

.c-sub-title3 {
	font-size:16px;
}
	.c-sub-title3::before {
		top:8px;
	}

.c-sign {
	margin-top: 50px;
}

	.c-icon-list__item::before {
		top:14px;
	}

	.c-icon-line-list__item::before {
		top:31px;
	}

.c-numbering-list__item {
    padding-left: 40px;
}

.c-txt-link:hover { opacity:1;}

	.c-link-btn:hover {
		color:var(--main-color);
	}
.c-link-btn__arrow {
	background: #fff;
	transform: none;
}

.c-mt40 { margin-top: 35px   !important;}
.c-mt50 { margin-top: 40px   !important;}
.c-mt60 { margin-top: 50px   !important;}
.c-mt70 { margin-top: 55px   !important;}
.c-mt80 { margin-top: 60px   !important;}
.c-mt90 { margin-top: 70px   !important;}
.c-mt100 { margin-top: 80px   !important;}
}

@media screen and (max-width: 767px) {
.c-title-en {
	font-size: 16px;
	padding-left:22px;
}
	.c-title-en:before {
		width: 12px;
		height: 6px;
		margin-top: -3px;
	}

.c-title {
	font-size:26px;
}

.c-sub-title-en {
	font-size: 16px;
	padding-left:22px;
}
	.c-sub-title-en:before {
		width: 12px;
		height: 6px;
		margin-top: -3px;
	}

.c-sub-title {
	font-size:24px;
}

.c-sub-title2 {
	font-size:18px;
	border-left:4px solid var(--main-color);
}

.c-sub-title3 {
	font-size:15px;
	padding-left:20px;
}
	.c-sub-title3::before {
		top:7px;
	}

.c-sign {
	margin-top: 40px;
}

	.c-icon-list__item::before {
		top:13px;
	}

.c-icon-line-list__item {
	width:100%;
	padding:1.1em 0 1.1em 1em;
}
	.c-icon-line-list__item::before {
		top:28px;
	}

.c-numbering-list__item {
    padding-left: 35px;
}

.c-numbering-list__item::before {
    top: 0.16em;
    width: 24px;
    height: 24px;
    font-size: 13px;
}

.c-table {
	width: 100%;
}
	.c-table,
	.c-table thead,
	.c-table tbody,
	.c-table tr,
	.c-table th,
	.c-table td {
		width: 100%;
		display: block;
	}
	.c-table th {
		padding: 1.2em 0 0 0;
		border-bottom:0;
	}
	.c-table td {
		padding: 0.6em 0 1.2em 0;
		border-bottom:1px solid #ddd;
	}

.c-link-btn {
	padding:1.2em 4em 1.2em 0;
	border-bottom:1px solid #ddd;
	transition:.6s;
}

.c-link-btn__arrow {
	right:0;
}

.c-mt40 { margin-top: 30px   !important;}
.c-mt50 { margin-top: 40px   !important;}
.c-mt60 { margin-top: 45px   !important;}
.c-mt70 { margin-top: 50px   !important;}
.c-mt80 { margin-top: 55px   !important;}
.c-mt90 { margin-top: 60px   !important;}
.c-mt100 { margin-top: 60px   !important;}
}

/* !CTA
---------------------------------------------------------- */
.cta {
	width:100%;
	padding:100px 50px 100px 50px;
	position: relative;
}

.cta__inner {
	height: 280px;
	background: url(../img/cta_box_bg.jpg) 0 0 no-repeat;
	background-size: cover;
	border-radius: 6px;
	display: flex;
	align-items: center;
	padding:0 60px;
}

.cta__left {
	width:36%;
}

.cta__title-en {
	font-size: 20px;
}

.cta__title {
	font-size:36px;
}

.cta__right {
	width:64%;
	display: flex;
	align-items: center;
}

.cta__tel {
	width:52%;
	
}

.cta__tel-title {
	font-size:20px;
	font-weight: var(--font-weight-bold);
	line-height: 1.4;
}

.cta__tel-number {
	font-family: var(--font-family-en);
	font-size:40px;
	color: var(--main-color);
	line-height: 1.4;
}
	.cta__tel-number i {
		font-size:66%;
		margin-right: 0.2em;
	}
	.cta__tel-number a {
		color: var(--main-color);
	}

.cta__btn {
	width:48%;
}

.cta__link-btn {
	display: block;
	width:100%;
	height: 80px;
	font-size:20px;
	font-weight: var(--font-weight-bold);
	color:#FFF;
	text-align: center;
	line-height: 80px;
	background: var(--main-color);
	border-radius: 4px;
	transition: .6s;
}
	a:hover.cta__link-btn {
		background: var(--accent-color);
	}

@media screen and (max-width:1139px) {
.cta__inner {
	height: 260px;
	padding:0 50px;
}

.cta__left {
	width:32%;
}

.cta__right {
	width:68%;
}

.cta__tel-number {
	font-size:38px;
}
}

@media screen and (max-width:1039px) {
.cta {
	padding:80px 30px 90px 30px;
}

.cta__inner {
	height: 220px;
	padding:0 50px;
}

.cta__left {
	width:32%;
}

.cta__title-en {
	font-size: 18px;
}

.cta__title {
	font-size:30px;
}

.cta__right {
	width:68%;
}

.cta__tel {
	width:52%;
	
}

.cta__tel-title {
	font-size:18px;
}

.cta__tel-number {
	font-size:32px;
}

.cta__btn {
	width:48%;
}

.cta__link-btn {
	height: 70px;
	font-size:18px;
	line-height: 70px;
}
	a:hover.cta__link-btn {
		background: var(--main-color);
	}
}

@media screen and (max-width:899px) {
.cta__inner {
	height: 200px;
	padding:0 40px;
}

.cta__left {
	width:32%;
}

.cta__title {
	font-size:26px;
}

.cta__tel-title {
	font-size:16px;
}

.cta__tel-number {
	font-size:28px;
}

.cta__right {
	width:68%;
}

.cta__link-btn {
	font-size:16px;
}
}

@media screen and (max-width:767px){
.cta {
	padding:70px 25px 80px 25px;
}

.cta__inner {
	max-width:300px;
	height: auto;
	background: url(../img/cta_box_bg.jpg) 30% 50% no-repeat;
	background-size: cover;
	flex-wrap: wrap;
	padding:25px 25px;
	margin: 0 auto;
}

.cta__left {
	width:100%;
	margin-bottom: 30px;
}

.cta__title-en {
	font-size: 16px;
}

.cta__title {
	font-size:22px;
}

.cta__right {
	width:100%;
	flex-wrap: wrap;
}

.cta__tel {
	width:100%;
	margin-bottom: 20px;
}

.cta__tel-title {
	font-size:14px;
	text-align: center;
}

.cta__tel-number {
	font-size:28px;
	text-align: center;
}
	.cta__tel-number i {
		font-size:66%;
		margin-right: 0.2em;
	}

.cta__btn {
	width:100%;
}

.cta__link-btn {
	height: 60px;
	font-size:16px;
	line-height: 60px;
}
}

/* !pageTop
---------------------------------------------------------- */
.pagetop {
	display: none;
	position: fixed;
	bottom: 10px;
	right: 10px;
	z-index: 99;
}
	.pagetop a {
		display: block;
		width: 50px;
		height: 50px;
		background-color: var(--second-color);
		border-radius:4px;
		text-indent:-9999px;
		transition: all 0.2s ease;
		position:relative;
	}
		.pagetop a:before{
			position:absolute;
			content:"";
			display: inline-block;
			width: 8px;
			height: 8px;
			margin: 0 10px;
			border-top: 2px solid #FFF;
			border-left: 2px solid #FFF;
			transform: rotate(45deg);
			top:24px;
			left:10px;
			transition:.2s;
		}
			.pagetop a:hover:before{
				top:20px;
			}
	
@media screen and (max-width:1039px){
.pagetop {
	bottom: 10px;
	right: 10px;
}
			.pagetop a:hover:before{
				top:24px;
			}
}

@media screen and (max-width:767px){
.pagetop {
	bottom: 10px;
	right: 10px;
}
	.pagetop a {
		width: 44px;
		height: 44px;
	}
		.pagetop a:before{
			top:20px;
			left:7px;
		}
			.pagetop a:hover:before{
				top:20px;
			}
}

/* !footer
---------------------------------------------------------- */
.footer {
	background: #F4F5F5;
	padding: 80px 50px 70px 50px;
	line-height: 1.6;
}

.footer__top {
	width:100%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.footer__info {
	flex: 1;
}

.footer__logo {
	width: 80px;
	height: auto;
	margin-bottom: 15px;
}

.footer__company-name {
	font-size:16px;
	font-weight: var(--font-weight-bold);
	margin-bottom: 15px;
}

.footer__add {
	font-style: normal;
	font-size:14px;
	margin-bottom: 15px;
}

.footer__contact {
	font-size:14px;
}
	.footer__contact a {
		color:var(--base-font-color);
	}

.footer__nav {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.footer__menu {
	display: flex;
	padding: 0;
	margin: 0 0 60px 0;
}

.footer__menu-item {
	margin-left: 50px;
}
	li:first-child.footer__menu-item {
		margin-left: 0;
	}

.footer__menu-item a {
	font-size:15px;
	color: var(--base-font-color);
	font-weight: var(--font-weight-bold);
	transition: .6s;
}
	.footer__menu-item a:hover {
		color: var(--main-color);
	}

.footer__bnr {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}

.footer__bnr-link {
	color: var(--base-font-color);
	display: block;
	transition: .6s;
}
	a:hover.footer__bnr-link {
		opacity:.7;
	}

.footer__banner-img {
	width: auto;
	height: 60px;
	display: block;
}

.footer__bnr-txt {
	font-size: 12px;
	text-align: center;
	margin-top: 5px;
}

.footer__bottom {
	margin-top: 50px;
	padding-top: 24px;
	border-top: 1px solid #D9DEDE;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.footer__sub-menu {
	display: flex;
	gap: 40px;
}

.footer__sub-menu-item a {
	color: var(--base-font-color);
	font-size: 14px;
	transition: .6s;
}

.footer__sub-menu-item a:hover {
	color: var(--main-color);
}

.footer__copyright {
	font-family: var(--font-family-en);
	font-size:12px;
	color: var(--base-font-color);
	letter-spacing: 0.06em;
}

@media screen and (max-width:1039px){
.footer {
	padding: 70px 30px 70px 30px;
}

.footer__company-name {
	font-size:15px;
}

.footer__menu {
	margin: 0 0 50px 0;
}

.footer__menu-item {
	margin-left: 30px;
}
	li:first-child.footer__menu-item {
		margin-left: 0;
	}

.footer__menu-item a {
	font-size:14px;
}
	.footer__menu-item a:hover {
		color: var(--base-font-color);
	}
	a:hover.footer__bnr-link {
		opacity:1;
	}

.footer__bottom {
	margin-top: 40px;
}

.footer__sub-menu-item a {
	font-size: 13px;
}

.footer__sub-menu-item a:hover {
	color: var(--base-font-color);
}
}

@media screen and (max-width:767px) {
.footer {
	padding: 50px 25px 30px 25px;
}

.footer__top {
	flex-wrap: wrap;
}

.footer__info {
	flex:auto;
	width:100%;
	margin-bottom: 30px;
}

.footer__logo {
	display: block;
	width: 70px;
	height: auto;
	margin: 0 auto 15px auto;
}

.footer__company-name {
	font-size:15px;
	text-align: center;
}

.footer__add {
	text-align: center;
}

.footer__contact {
	text-align: center;
}

.footer__nav {
	width:100%;
	align-items: center;
	padding-top:15px;
	border-top: 1px solid #D9DEDE;
}

.footer__menu {
	flex-wrap: wrap;
	margin: 0 0 30px 0;
}

.footer__menu-item {
	width:100%;
	margin-left: 0;
}
	li:first-child.footer__menu-item {
		margin-left: 0;
	}

.footer__menu-item a {
	display: block;
	font-size:14px;
	width:100%;
	height: 48px;
	line-height: 48px;
	text-align: center;
}

.footer__banner-img {
	height: 50px;
}

.footer__bnr-txt {
	font-size: 11px;
}

.footer__bottom {
	margin-top: 30px;
	padding-top: 16px;
	border-top: 1px solid #D9DEDE;
	flex-wrap: wrap;
}

.footer__sub-menu {
	width:100%;
	display: flex;
	justify-content: center;
	gap: 40px;
}

.footer__sub-menu-item a {
	display: block;
	line-height: 44px;
	font-size: 13px;
}

.footer__copyright {
	width: 100%;
	font-size:10px;
	text-align: center;
	margin-top: 20px;
}
}

@media screen and (max-width:360px) {
.footer__banner-img {
	height: 48px;
}
}

@media screen and (max-width:359px) {
.footer__banner-img {
	height: 42px;
}
}

/* !アニメーション
---------------------------------------------------------- */
.fadeIn_up {
  opacity: 0;
  transform: translateY(70px);
  transition: 1s .4s;
}

.fadeIn_up.is-show {
  transform: translateY(0);
  opacity: 1;
}

.piece1 {
  opacity: 0;
  transform: translate(-140px, -10px) rotate(45deg);
  transition: 1s .4s;
}

.piece1.is-show {
  transform: translate(0, 0) rotate(0);
  opacity: 1;
}

.piece2 {
  opacity: 0;
  transform: translate(100px, 50px) rotate(-45deg);
  transition: 1s .5s;
}

.piece2.is-show {
  transform: translate(0, 0) rotate(0);
  opacity: 1;
}

.piece3 {
  opacity: 0;
  transform: translate(-100px, 50px) rotate(45deg);
  transition: 1s .6s;
}

.piece3.is-show {
  transform: translate(0, 0) rotate(0);
  opacity: 1;
}

.triangle1 {
  transform: translate(239px, 0);
  transition: .7s 0s;
}

.triangle1.is-show {
  transform: translate(0, 0);
}

.triangle2 {
  transform: translate(-499px, 0);
  transition: .7s 0s;
}

.triangle2.is-show {
  transform: translate(0, 0);
}

.triangle3 {
  transform: translate(419px, 0);
  transition: .7s 0s;
}

.triangle3.is-show {
  transform: translate(0, 0);
}

@media screen and (max-width: 1039px) {
.triangle1 {
  transform: translate(179px, 0);
  transition: .7s 0s;
}

.triangle1.is-show {
  transform: translate(0, 0);
}

.triangle2 {
  transform: translate(-399px, 0);
  transition: .7s 0s;
}

.triangle2.is-show {
  transform: translate(0, 0);
}

.triangle3 {
  transform: translate(349px, 0);
  transition: .7s 0s;
}

.triangle3.is-show {
  transform: translate(0, 0);
}
}

@media screen and (max-width: 767px) {
.triangle1 {
  transform: translate(119px, 0);
  transition: .7s 0s;
}

.triangle1.is-show {
  transform: translate(0, 0);
}

.triangle2 {
  transform: translate(-249px, 0);
  transition: .7s 0s;
}

.triangle2.is-show {
  transform: translate(0, 0);
}

.triangle3 {
  transform: translate(209px, 0);
  transition: .7s 0s;
}

.triangle3.is-show {
  transform: translate(0, 0);
}
}