@charset "utf-8";



/*リセットCSS（sanitize.css）の読み込み
---------------------------------------------------------------------------*/
@import url("https://unpkg.com/sanitize.css");

/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500&display=swap');

/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

/*slick.cssの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css");

/*テンプレート専用cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("inview.css");



/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/
:root {
    --primary-color: #624d7c;	/*このテンプレートのテーマカラー*/
    --secondary-color: #1e1530;	/*テーマカラーとは別に、サブ的に使うカラー*/
	--space-large: 120px;		/*主にコンテンツの左側のスペース確保に使います*/
	--space-small: 20px;		/*主にコンテンツの右側のスペース確保に使います*/
}


/*opa1のキーフレーム設定
---------------------------------------------------------------------------*/
@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}


/*animation1のキーフレーム設定（開閉ブロックのアニメーションに使用）
---------------------------------------------------------------------------*/
@keyframes animation1 {
	0% {left: -200px;}
	100% {left: 0px;}
}


/*fadeInのキーフレーム設定（テキストのフェードインに使用）
---------------------------------------------------------------------------*/
@keyframes fadeIn {
	0% {opacity: 0;transform: scale(0.8);}
	100% {opacity: 1;transform: scale(1);}
}


/*全体の設定
---------------------------------------------------------------------------*/
html,body {height: 100%;}


body {
	font-family: 'Zen Maru Gothic', "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	-webkit-text-size-adjust: none;
	background: #372351;	/*背景色*/
	color: #fff;			/*文字色*/
	line-height: 2.2;		/*行間*/
}

/*table全般の設定*/
table {border-collapse:collapse;}

/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

/*videoタグ*/
video {max-width: 100%;}

/*iframeタグ*/
iframe {width: 100%;}

/*他*/
input {font-size: 1rem;}


/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	/*color: #6a6462;		文字色*/
	transition: 0.3s;	/*hoverまでにかける時間。0.3秒。*/
}

/*マウスオン時*/
a:hover {
	filter: brightness(1.3);	/*少し明るくする*/
}


/*コンテナー（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
#container {
	height: 100%;
	display: flex;					/*flexを使う指定*/
	flex-direction: column;			/*子要素を縦並びにする*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	margin: 0 auto;
	position: relative;
}


/*コンテンツ
---------------------------------------------------------------------------*/
#contents {
	flex: 1;
}


/*section
---------------------------------------------------------------------------*/
section {
	margin: 5rem;	/*上、右、下、左へのマージン（外側への余白）*/
}

	/*画面幅700px以下の追加指定*/
	@media screen and (max-width:700px) {

	section {
		margin: 4rem var(--space-small);	/*上下、左右へのマージン（外側への余白）*/
	}

	}/*追加指定ここまで*/

	/*画面幅1800px以上の追加指定*/
	@media screen and (min-width:1800px) {

	section {
		width: 1500px;
		margin: 0 auto;
	}

	}/*追加指定ここまで*/


/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	display: flex;			/*flexボックスを使う指定*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	align-items: center;			/*垂直揃えの指定。天地中央に配置されるように。*/
	padding: 30px 0;				/*上下、左右へのヘッダー内の余白*/
	margin-left: var(--space-large);
	margin-right: var(--space-small);
}

/*トップページのヘッダーブロック*/
.home header {
	padding: 0;	/*上下、左右へのヘッダー内の余白*/
	margin-left: 0;	/*左側へのマージン（外側への余白）*/
	margin-right: 0;	/*右側マージンをなくす（スライドショーが画面右側まで出るように）*/
}

	/*画面幅700px以下の追加指定*/
	@media screen and (max-width:700px) {

	/*トップページのヘッダーブロック*/
	.home header {
		margin-left: 0px;
	}

	}/*追加指定ここまで*/

/*トップページのロゴ*/
	.home #logo {margin: 0;}
	.home #logo img {

	width: 200px;		/*画像の幅。実際には下のpaddingを引いた数字が幅になります。*/
	padding: 10px;	/*余白。ロゴがギチギチにならないようにする為。*/
}


/*「資料請求はこちら」ボタン
---------------------------------------------------------------------------*/
#side-btn p {padding:0;margin:0;}

#side-btn a {
	text-decoration: none;
	writing-mode: vertical-rl;	/*縦書きの指定。*/
	text-orientation: upright;	/*文字の向き*/
	position: fixed;			/*画面スクロールしても移動しない*/
	left: 0px;					/*左からの配置場所指定*/
	top: 80px;					/*上からの配置場所指定*/
	background-color: var(--secondary-color);	/*背景色。css冒頭で指定しているsecondary-colorを読み込みます*/
	color: #fff;								/*文字色*/
	display: flex;			/*flexボックスを使う指定*/
	justify-content: center;	/*並びかたの種類の指定*/
	align-items: center;	/*天地中央に配置されるようにする指定だが、縦書きなのでこの場合は左右中央になる。*/
	letter-spacing: 0.3em;	/*文字間隔*/
	/*text-indent: 0.4em;		上の行に合わせておけばOK*/
	width: 80px;			/*幅*/
	padding: 1.5rem 0 0.5rem;		/*ボタン内の余白。上下、左右への順番。*/
	line-height: 1.4;
}

/*資料のアイコン*/
#side-btn i {
	transform: scale(1.5);	/*２倍の大きさに*/
	padding-bottom: 0.5rem;	/*下のテキストとの間の余白*/
}

	/*画面幅700px以下の追加指定*/
	@media screen and (max-width:700px) {

	#side-btn {
		display: none;	/*ボタンを非表示に*/
	}

	}/*追加指定ここまで*/


/*main
---------------------------------------------------------------------------*/
/*h2*/
main h2 {
	font-size: 2.4rem;	/*文字サイズ*/
	font-weight: 500;	/*文字の太さ*/
	color: var(--primary-color);	/*css冒頭で指定しているprimary-colorを読み込みます*/
	line-height: 1.5;	/*行間を少し狭くする*/
}

/*h2の直後にlist-normal BOXが続く場合*/
main h2 + .list-normal {
	margin-top: 7rem;	/*上に広めの余白をとる*/
}

/*h2の中の小文字表記（hosoku）*/
main h2 .hosoku {
	display: block;
	font-size: 0.6em;	/*親要素の40%のサイズに*/
	/*opacity: 0.5;		透明度。色が50%出る。*/
	color: #fff;
}

/*h3*/
main h3 {
	font-size: 1.8rem;	/*文字サイズ*/
	font-weight: 500;	/*文字の太さ*/
}


/*フッター設定
---------------------------------------------------------------------------*/
small {font-size: 100%;}
footer {
	font-size: 0.7rem;		/*文字サイズ*/
	background: #1d1b1b;	/*背景色*/
	color: #fff;			/*文字色*/
	text-align: center;		/*内容をセンタリング*/
	padding: 1rem;			/*ボックス内の余白*/
}

/*リンクテキスト*/
footer a {
	color: inherit;
	text-decoration: none;
	padding: 0 1em;
}

/*著作部分*/
footer .pr {display: block;}


/*スライドショー（slickを使用）
---------------------------------------------------------------------------*/
/*画像を囲むブロック*/
.mainimg-slick {
	width: 70vw;	/*スライドショーの幅。画面の70%。*/
	height: auto;
}

	/*画面幅700px以下の追加指定*/
	@media screen and (max-width:700px) {

	/*画像を囲むブロック*/
	.mainimg-slick {
		width: 80vw;	/*スライドショーの幅の上書き。*/
	}

	}/*追加指定ここまで*/


/*2カラムブロック（※900px未満では１カラム）見出しの部分
---------------------------------------------------------------------------*/
/*２カラムを囲むブロック*/
.list-half-parts .list-parts {
	display: flex;			/*flexボックスを使う指定*/
	flex-direction: column;	/*子要素を縦並びにする*/
	margin: 0 5%;
}

/*画像ブロック共通*/
	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

		/*２カラムを囲むブロック*/
		.list-half-parts .list-parts {
			flex-direction: row;			/*子要素を横並びにする*/
			justify-content: space-between;	/*並びかたの種類の指定*/
			align-items: center;			/*垂直揃えの指定。天地中央に配置されるように。*/
			margin: 0 0 2% 5%;
		}

		.list-half-parts {
			padding-bottom: 20px;
		}
		
		/*画像ブロック共通*/
		.list-half-parts .image-l-parts, .list-half-parts .image-r-parts {
			width: 50%;			/*画像の幅*/
		}
		
		/*画像を右に配置する場合*/
		.list-half-parts .image-r-parts {
			margin-left: 2rem;	/*画像の左側に空けるスペース*/
		}
		
		/*画像を左に配置する場合*/
		.list-half-parts .image-l-parts {
			order: -1;
			margin-right: 2rem;	/*画像の右側に空けるスペース*/
		}

		/*テキストブロック*/
		.list-half-parts .text-parts {
			flex: 1;
		}
}

.text-parts ol {
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding: 0;
  margin: 0;
}

.text-parts ol li {
  position: relative;
  padding-left: 30px;
  line-height: 1.5em;
  padding: 0.5em 0.5em 0.5em 30px;
}

.text-parts ol li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*以下数字のデザイン変える*/
  display:inline-block;
  background: #fff;
  color: #0bceed;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 15px;
  border-radius: 50%;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  /*以下 上下中央寄せのため*/
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

/*追加指定ここまで*/


/*headlineのコンテンツ（ブロック）
---------------------------------------------------------------------------*/
/*ブロック全体*/
.headline {
	background-image: url('../images/header_bg_boy.png'), url('../images/header_bg.png');
	background-size: 35% auto, cover;
	background-position: right, center;
	background-repeat: no-repeat, no-repeat;
}


/*左側のブロック*/
.headline-contents .left {
	margin-bottom: 50px;	/*下に空けるスペース*/
}

	.headline-contents .right {
		width: 100%;
		text-align: center;
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {
	
	.headline-contents {
		display: flex;	/*flexボックスを使う指定*/
		gap: 2rem;		/*左右のボックスの間のマージン的な設定*/
		margin: 0 auto;
        width: 80%;
	}
	
	/*左側のブロック*/
	.headline-contents .left {
		margin-bottom: 0;	/*下のマージン（外側への余白）をリセット*/
		width: 50%;			/*幅。leftとrightで合計100になれば、お好みで変更してもらって構いません。*/
	}
	.headline-contents .right {
		width: 50%;			/*幅。leftとrightで合計100になれば、お好みで変更してもらって構いません。*/
	}

	}/*追加指定ここまで*/


/*headline
---------------------------------------------------------------------------*/

	/*画面幅900px以下の追加指定*/
	@media screen and (max-width:900px) {

	.headline-contents {
		margin: auto;
        width: 80%;
	}

	}/*追加指定ここまで*/


/*side2共通
---------------------------------------------------------------------------*/
/*ブロック全体の設定*/
.side2 {
 	display: flex;	/*flexボックスを使う指定*/
	flex-direction: column;	/*子要素を縦並びにする*/
	gap: 2rem;		/*マージン的な指定*/
}

/*画像を囲むブロックの設定*/
.side2-image {
    justify-content: center;	/*並びかたの種類の指定*/
}

/*画像の設定*/
.side2-image img {
	padding: 10px;
    /*width: 40%;	幅*/
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

	/*ブロック全体の設定*/
	.side2 {
		flex-direction: row;	/*子要素を縦並びから縦並びに変更*/
		justify-content: space-around;	/*並びかたの種類の指定*/
	}

	/*画像を囲むブロックの設定*/
	.side2-image {
		display: flex;	/*flexボックスを使う指定*/
		flex-direction: column;	/*子要素を縦並びにする*/
		flex: 1;				/*幅*/
	}

	/*画像の設定*/
	.side2-image img {
		width: 70%;	/*幅*/
		max-width: 800px;
		margin: auto;
		padding: 0.7vw;		/*写真の縁にあたる部分*/
	}

	/*テキストブロックの設定*/
	.side2-text {
		flex: 3;		/*幅*/
		display: flex;	/*flexボックスを使う指定*/
		flex-direction: column;	/*子要素を縦並びにする*/
	}

	}/*追加指定ここまで*/


/*btn1　ボタン（不使用）
---------------------------------------------------------------------------*/
.btn1 a {
	display: inline-block;text-decoration: none;
	background-image: linear-gradient(90deg, rgba(0, 201, 255, 1), rgba(79, 233, 133, 1));	/*color*/
	border: 1px solid var(--primary-color);	/*枠線の幅、線種、色*/
	color: #fff;			/*文字色*/
	border-radius: 100px;	/*角丸のサイズ。適当に大きければOK。*/
	padding: 0.2em 2.5em;		/*上下、左右へのボタン内の余白*/
	text-align: center;		/*テキストを中央に*/
	font-size: 2rem;
	text-shadow: 1px 2px 3px #808080;
	font-weight: 500;	/*文字の太さ*/
}
.btn1.block a {
	display: block;
}
/*マウスオン時*/
.btn1 a:hover {
	background: #fff;	/*背景色*/
	color: var(--primary-color);	/*文字色。css冒頭で指定しているprimary-colorを読み込みます*/
}


/*kazari（トップページロゴ下の円のアニメーション）
---------------------------------------------------------------------------
以下のurl（※海外の外部サイト）で簡単にborder-radiusの値を取得できます。
https://9elements.github.io/fancy-border-radius/
---------------------------------------------------------------------------*/
@keyframes kazari {  
	  
	0% {
		border-radius: 61% 39% 65% 35% / 57% 62% 38% 43%;
		transform: scale(1) rotate(0deg);	/*scaleは大きさ。rotateは回転。*/
	}
	50% {
		border-radius: 41% 59% 38% 62% / 62% 41% 59% 38%;
		transform: scale(1.3) rotate(180deg);	/*scaleは大きさ。1.3倍。rotateは回転。180度。*/
	}
	100% {
		border-radius: 61% 39% 65% 35% / 57% 62% 38% 43%;
		transform: scale(1) rotate(360deg);	/*scaleは大きさ。rotateは回転。360度。*/
	}

}

/*kazari1*/
.kazari1 {
	animation: kazari 15s linear infinite;	/*15s(秒)がアニメーションにかける秒数です*/
	width: 30vw;height: 30vw;				/*幅と高さ。vwは画面幅に対して。100vwが幅100%です。*/
	position: absolute;z-index: 0;
	top: 10vh;left: 10vw;	/*配置場所の指定。上から、左から。*/
	background: #ece2da;	/*背景色*/
	opacity: 0.1;			/*透明度。色が50%出た状態。*/
}

/*kazari2*/
.kazari2 {
	animation: kazari 150s linear reverse infinite;	/*150s(秒)がアニメーションにかける秒数です*/
	width: 22vw;height: 22vw;				/*幅と高さ。vwは画面幅に対して。100vwが幅100%です。*/
	position: absolute;z-index: 0;
	top: -1vh;left: 30vw;	/*配置場所の指定。上から、左から。*/
	background: #fff url('../images/bg_1.png') center center / 100px;	/*背景色、和柄パターンの読み込み。100pxはパターンの大きさ。。*/
	opacity: 0.1;			/*透明度。色が50%出た状態。*/
}


/*テキストのフェードイン設定
---------------------------------------------------------------------------*/
/* 初期状態でテキストを非表示にする */
.fade-in-text {
    visibility: hidden;
}

/* アニメーションを適用するクラス。
animationの行の「0.5s」が文字の出現のなめらかさで、大きいほどなめらかに出てきます。0.01など小さくするとタイピング風に出てきます。
１文字ずつの出現する際の時差は、js/main.jsの「テキストのフェードイン効果」の中にある「0.3」で調整できます。*/
.char {
    display: inline-block;
    opacity: 0;
    animation: fadeIn 0.5s linear both;
}


/*波の形の背景（.bg-wave）
---------------------------------------------------------------------------*/
/*共通*/
.bg-wave1, .bg-wave2, .bg-wave3 {
	background-position: top center, bottom center;
	background-size: 100% 50px;		/*右側の数字は画像の高さ*/
	background-repeat: no-repeat;
	padding-top: 50px;		/*上のbackground-sizeの高さの数値に合わせておけばOK*/
	padding-bottom: 50px;	/*上のbackground-sizeの高さの数値に合わせておけばOK*/
}

/*共通*/
.bg-wave1-inner, .bg-wave2-inner, .bg-wave3-inner {
	padding-top: 50px;		/*上のbackground-sizeの高さの数値に合わせておけばOK*/
	padding-bottom: 50px;	/*上のbackground-sizeの高さの数値に合わせておけばOK*/
}

/*共通（ボックス内の上下の空白が広くなりすぎるので、sectionの上下マージンをなくす）*/
.bg-wave1-inner > section, .bg-wave2-inner > section, .bg-wave3-inner > section, .other > section {
	margin-top: 0;
	margin-bottom: 0;
}

/*bg-wave1の背景画像の読み込み*/
.bg-wave1 {
	background-image: url('../images/bg_wave1_top.png'), url('../images/bg_wave1_bottom.png');
}

.bg-wave1-inner {
	background: #1e1530;	/*背景色。背景画像の色に合わせる。*/
}

/*bg-wave2の背景画像の読み込み*/
.bg-wave2 {
	background-image: url('../images/bg_wave2_top.png'), url('../images/bg_wave2_bottom.png');
}

.bg-wave2-inner {
	background-image: linear-gradient(180deg, rgba(11, 206, 237, 1), rgba(53, 223, 172, 1));	/*背景色。背景画像の色に合わせる。*/
}


/*bg-wave3の背景画像の読み込み*/
.bg-wave3 {
	background-image: url('../images/bg_wave3_top.png'), url('../images/bg_wave3_bottom.png');
}

.bg-wave3-inner {
	background: #dbcae1;	/*背景色。背景画像の色に合わせる。*/
}


/*Happy
---------------------------------------------------------------------------*/
.bg-happy {
	background-position: left top, right top, center;
	background-size: 20% auto, 40% auto, cover;
	background-repeat: no-repeat, no-repeat, no-repeat;
	padding-bottom: 30px;
	background-image: url('../images/happy_topleft_bg.png'), url('../images/happy_castle_bg.png'),  url('../images/happy_bg_pc.png');
}

.bg-happy > section {
	margin-top: 0;
	margin-bottom: 0;
}

.bg-happy h2 {
	margin-left: 10%;
}

/*あっくん重なり*/
.bg-voice .top {
    top: -200px;
    left: 10%;
}

.absolute {
    position: absolute;
}

	/*画面幅700px以下の追加指定*/
	@media screen and (max-width:900px) {

	/*あっくんの位置*/
	.bg-voice .top {
    	top: -120px;
	}
	.bg-voice .top img {
	    width: 80%;
	}
	}

	/*画面幅700px以下の追加指定*/
	@media screen and (max-width:700px) {

	/*あっくんの大きさ*/
	.bg-voice .top img {
	    width: 50%;
	}

	}/*追加指定ここまで*/


/*state
---------------------------------------------------------------------------*/
.state h3 {
	margin: 0;
}


/*voice
---------------------------------------------------------------------------*/
.bg-voice > section {
	margin-top: 0;
	margin-bottom: 0;
}

/*bg-voiceの背景画像の読み込み*/
.bg-voice {
   position: relative;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url('../images/voice_bg.png');
    background-size:cover;                 /* 画像のサイズを指定    */
    width:100%;                              /* 横幅のサイズを指定    */
	background-color: rgba(52,35,88,0.5);	/*背景色。背景画像の色に合わせる。*/
	background-blend-mode:lighten;
	margin-bottom: 2em;
}

/*protector
---------------------------------------------------------------------------*/
.protector a {color: inherit;}
.protector {
color: #282828;
font-weight: 500;
}

/*other
---------------------------------------------------------------------------*/
.other {
background-image: url('../images/other_bgline.png');
background-size: cover;
margin: 2em 0;
}

.thumbnail-slide {
width: 80%;
margin: 0 auto 1em;
}


	/*画面幅700px以下の追加指定*/
	@media screen and (max-width:900px) {

	/*あっくんの大きさ*/
	.other {
	    background-size: contain;
	    background-repeat: repeat;
	}

	}/*追加指定ここまで*/


/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

/*ボタンの設定*/
.pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 99;
	position: fixed;	/*スクロールに追従しない(固定で表示)為の設定*/
	right: 20px;		/*右からの配置場所指定*/
	bottom: 20px;		/*下からの配置場所指定*/
	color: #fff;		/*文字色*/
	font-size: 1.5rem;	/*文字サイズ*/
	background: rgba(0,0,0,0.2);	/*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
	width: 60px;		/*幅*/
	line-height: 60px;	/*高さ*/
	border-radius: 50%;	/*円形にする*/
}


/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-check, .color-check a {color: #ff0000 !important;}
.color-theme, .color-theme a {color: var(--primary-color) !important;}
.l {text-align: left !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.mb0 {margin-bottom: 0px !important;}
.mb30 {margin-bottom: 30px !important;}
.look {display: inline-block;padding: 0px 10px;background: rgba(0,0,0,0.03);border: 1px solid #ccc; border-radius: 3px;word-break: break-all;}
.small {font-size: 0.7em;}
.large {font-size: 2em; letter-spacing: 0.1em;}
.pc {display: none;}
.dn {display: none !important;}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:600px) {

	.ws {width: 48%;display: inline;}
	.sh {display: none;}
	.pc {display: block;}

	}

	/*画面幅600px以下の追加指定*/
.br-sp, .img-sp {
  display: none;
}

@media screen and (max-width: 600px) {
	.img-pc {
        display: none;
    }
	.br-sp, .img-sp {
    display: inline-block;
  }
}

/*追加指定ここまで*/