@charset "UTF-8";

/*
（768px以上）タブレット以上の場合 タブレットを含む
@media (min-width:768px){}

横幅1080pxより大きいとき（PC表示）
@media (min-width:1080px){
}
*/


/****************************************************************************
    common parts
****************************************************************************/

/* PC/SP/Tabletで表示・非表示
--------------------------------*/
/*SPの時のみに表示*/
.m-sp {
	display: block;
}
@media (min-width:768px){
	.m-sp {
		display: none;
	}
}

/*SPとタブの時に表示*/
.m-sp-tab {
	display: block;
}
@media (min-width:1080px){
	.m-sp-tab {
		display: none;
	}
}

/*PCとタブの時に表示*/
.m-pc-tab {
	display: none;
}
@media (min-width:768px){
	.m-pc-tab {
		display: block;
	}
}

/*PCの時のみに表示*/
.m-pc {
	display: none;
}
@media (min-width:1080px){
	.m-pc {
		display: block;
	}
}


/* box
--------------------------------*/
/* sectionモジュール */
.m-section {
	padding: 3em 0;
}
@media (min-width:768px){
	.m-section {
		padding: 4em 0;
	}
}
@media (min-width:1080px){
	.m-section {
		padding: 5em 0;
	}
}

/* innerモジュール */
.m-inner {
	width: 100%;
	padding-left: 5%;
	padding-right: 5%;
}
@media (min-width:768px){
	.m-inner {
		padding-left: 3%;
		padding-right: 3%;
	}
}
@media (min-width:1080px){
	.m-inner {
		padding-left: 0;
		padding-right: 0;
	    width: 1080px;
		margin: 0 auto;
	}
}


/* テキスト関連
--------------------------------*/
.m-txt-en {
	font-family: 'Josefin Sans', sans-serif;
	font-weight: bold;
}
.m-txt-en-hand {
	font-family: 'Square Peg', cursive;
}

/* 電話発信（スマホでタップした時だけ電話発信を有効にする）
--------------------------------*/
@media (min-width:768px){
	.m-tel {
		pointer-events: none;
	}
}

/* 背景モジュール
--------------------------------*/
.m-bg-white {
	background-color: #fff;
}

.m-bg-lightblue {
	background-color: #f0f7fc;
}

/****************************************************************************
 	Material icons
****************************************************************************/
/* Material iconsを利用する */
.material-icons,
.material-icons-outlined {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	display: inline-flex;
	width: 1em;
	height: 1em;
	line-height: 1;
	text-transform: none;
	vertical-align: middle;

	/* WebKitブラウザサポート */
	-webkit-font-smoothing: antialiased;
	/* Chrome、Safariサポート */
	text-rendering: optimizeLegibility;

	/* Firefoxサポート */
	-moz-osx-font-smoothing: grayscale;

	/* IEサポート */
	font-feature-settings: 'liga';
}
/****************************************************************************
 	Material symbols
****************************************************************************/
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}


/****************************************************************************
 	title
****************************************************************************/
.m-title-L {
	color: #fff;
	position: relative;
	margin-bottom: 1rem;
}
.m-title-L .num {
	position: absolute;
	top: 0;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 1px;
	border-bottom: 1px solid #fff;
}
.m-title-L .title-en {
	padding-left: 24px;
	font-size: 26px;
	line-height: 1;
	letter-spacing: 1px;
}
@media (min-width:768px){
	.m-title-L {
		margin-bottom: 2rem;
	}
	.m-title-L .num {
		font-size: 25px;
	}
	.m-title-L .title-en {
		padding-left: 38px;
		font-size: 40px;
	}	
}

/****************************************************************************
 	pagetitle-sec
****************************************************************************/
.m-pagetitle-sec {
	width: 100%;
	height: 220px;
	position: relative;
	background-color: #203aef;
	text-align: center;
	padding: 8.5em 0 0 0;
}
.m-pagetitle-sec .title-en {
	color: #fff;
	font-size: 1.6em;
	line-height: 1;
}
.m-pagetitle-sec .title-jp {
	color: #fff;
	font-size: 1em;
	line-height: 1.4;
	font-weight: 700;
	margin-top: .2em;
}
@media (min-width:768px){
	.m-pagetitle-sec {
		height: 280px;
		padding: 10em 0 0 0;
	}
	.m-pagetitle-sec .title-en {
		font-size: 2em;
	}
	.m-pagetitle-sec .title-jp {
		font-size: 1.1em;
	}
}
@media (min-width:900px){/*gNaviのブレイクポイントに合わせて*/
	.m-pagetitle-sec {
		height: 320px;
		padding: 10em 0 0 0;
	}
	.m-pagetitle-sec .title-en {
		font-size: 2.2em;
	}
	.m-pagetitle-sec .title-jp {
		font-size: 1.1em;
	}
}



/****************************************************************************
    margin top
****************************************************************************/

/*   XXSサイズ
---------------------*/
.m-mt-XXS {
	margin-top: 5px;
}
@media (min-width:768px){
	.m-mt-XXS {
		margin-top: 10px;
	}
}
/*   XSサイズ
---------------------*/
.m-mt-XS {
	margin-top: 10px;
}
@media (min-width:768px){
	.m-mt-XS {
		margin-top: 20px;
	}
}

/*   Sサイズ
---------------------*/
.m-mt-S {
	margin-top: 20px;
}
@media (min-width:768px){
	.m-mt-S {
		margin-top: 30px;
	}
}

/*   Mサイズ
---------------------*/
.m-mt-M {
	margin-top: 30px;
}
@media (min-width:768px){
	.m-mt-M {
		margin-top: 40px;
	}
}

/*   Lサイズ
---------------------*/
.m-mt-L {
	margin-top: 40px;
}
@media (min-width:768px){
	.m-mt-L {
		margin-top: 60px;
	}
}

/*   XLサイズ
---------------------*/
.m-mt-XL {
	margin-top: 50px;
}
@media (min-width:768px){
	.m-mt-XL {
		margin-top: 70px;
	}
}