@charset "utf-8";
/*====================================*\
 * TOC / Breakpoints
 *------------------------------------
 * Foundation
 * Layout
 * Object
 *  ├ Project
 *  ├ Components
 *  └ Utilities（原則編集禁止）
 *------------------------------------
 * ブレークポイント一覧（モバイルファースト）
 *   max-width: 30em ･･･ スマホ
 * → min-width: 48em ･･･ タブレット
 * → min-width: 66.875em ･･･ PC・大型タブレット
 *   min-width: 80em ･･･ PCワイドディスプレイ
  *------------------------------------
 * Webフォント一覧
 * ・ Caveat ･･･ ロゴ・見出しの英数字
   *------------------------------------
 * 配色
 * #fff（白） ･･･ ベースカラー (75%)
 * #e2ce1e（イエロー） ･･･ メインカラー (12.5%)
 * #3d3e50（濃紺） ･･･ メインカラー (12.5%)
 * #b85262（ワインレッド） ･･･ アクセントカラー (5%)
\*====================================*/


/*============================================================================*\
   $Foundation
\*============================================================================*/

html { font-size: 62.5%; }
body {
	background: #fff url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22500%22%20height%3D%22500%22%20viewBox%3D%220%200%20500%20500%22%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill%3Anone%3B%7D.b%7Bfill%3A%23e2ce1e%3B%7D.c%7Bfill%3A%23b85262%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Crect%20class%3D%22a%22%20width%3D%22500%22%20height%3D%22500%22%2F%3E%3Crect%20class%3D%22b%22%20x%3D%22321.37%22%20y%3D%22280.49%22%20width%3D%223.6%22%20height%3D%2216.92%22%20transform%3D%22translate%28-100.72%20379.81%29%20rotate%28-53.9%29%22%2F%3E%3Crect%20class%3D%22b%22%20x%3D%2282.13%22%20y%3D%22332.96%22%20width%3D%2211.44%22%20height%3D%2211.44%22%20transform%3D%22translate%28426.54%20250.83%29%20rotate%2890%29%22%2F%3E%3Crect%20class%3D%22b%22%20x%3D%22382.57%22%20y%3D%2247.1%22%20width%3D%2222.54%22%20height%3D%2222.54%22%20transform%3D%22translate%288.13%20157.06%29%20rotate%28-22.78%29%22%2F%3E%3Crect%20class%3D%22c%22%20x%3D%2283.43%22%20y%3D%2249.14%22%20width%3D%2212.49%22%20height%3D%2212.49%22%20transform%3D%22translate%2865.43%20-47.19%29%20rotate%2845%29%22%2F%3E%3Cpath%20class%3D%22c%22%20d%3D%22M441.82%2C458.11%2C451.7%2C468l-9.88%2C9.89L431.93%2C468l9.89-9.89m0-4.29L427.63%2C468l14.19%2C14.18L456%2C468l-14.18-14.18Z%22%2F%3E%3Crect%20class%3D%22c%22%20x%3D%2246.95%22%20y%3D%22164.5%22%20width%3D%225.51%22%20height%3D%2225.91%22%20transform%3D%22translate%28114.11%204.79%29%20rotate%2836.1%29%22%2F%3E%3Crect%20class%3D%22c%22%20x%3D%22213.15%22%20y%3D%22212.1%22%20width%3D%2210.68%22%20height%3D%2210.68%22%20transform%3D%22translate%28-67.15%20101.57%29%20rotate%28-22.78%29%22%2F%3E%3Crect%20class%3D%22b%22%20x%3D%22219.75%22%20y%3D%22398.94%22%20width%3D%2211.95%22%20height%3D%2211.95%22%20transform%3D%22translate%28-139.18%20119%29%20rotate%28-22.78%29%22%2F%3E%3Crect%20class%3D%22b%22%20x%3D%2225.59%22%20y%3D%22393.13%22%20width%3D%227.57%22%20height%3D%2235.56%22%20transform%3D%22translate%28-319.93%20192.52%29%20rotate%28-53.9%29%22%2F%3E%3Crect%20class%3D%22c%22%20x%3D%22388.03%22%20y%3D%22225.39%22%20width%3D%2221.58%22%20height%3D%2221.58%22%20transform%3D%22translate%28118.92%20-133.27%29%20rotate%2822.22%29%22%2F%3E%3Crect%20class%3D%22b%22%20x%3D%22182.82%22%20y%3D%2284.38%22%20width%3D%227.78%22%20height%3D%2236.57%22%20transform%3D%22translate%28277.07%20295.62%29%20rotate%28-143.9%29%22%2F%3E%3Crect%20class%3D%22c%22%20x%3D%22136.34%22%20y%3D%22430.34%22%20width%3D%2221.58%22%20height%3D%2221.58%22%20transform%3D%22translate%28-159.34%2091.39%29%20rotate%28-22.78%29%22%2F%3E%3C%2Fsvg%3E') center; /* ../img/bg_tile.svg */
	background-size: 250px 250px;
	color: #3d3e50;
	font-family: -apple-system, BlinkMacSystemFont, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	font-size: 1.4em;
	line-height: 1.625;
}

a {
	color: #b85262;
	transition: color .2s;
}
a:focus,
a:hover { text-decoration: none; }
a img { transition: opacity .2s; }
a:focus img,
a:hover img { opacity: .8; }

@media (min-width: 48em) {
	body {
		background-size: 500px 500px;
		font-size: 1.6em;
	}
}




/*============================================================================*\
   $Layout
\*============================================================================*/

.wrapper {
	position: relative;
	width: 100%;
	max-width: 66.875em; /* 1070px(66.875em) - 15px - 15px = 1040px */
	padding-left: 15px;
	padding-right: 15px;
	margin: 0 auto;
}




/*============================================================================*\
   $Object -- Project
\*============================================================================*/

/*------------------------------------*\
   Contents
\*------------------------------------*/

/* Heading
   ---------------------------------- */
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-size: inherit;
	font-weight: bold;
	font-family: -apple-system, BlinkMacSystemFont, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	-moz-font-feature-settings: "pkna";
	-webkit-font-feature-settings: "pkna";
	font-feature-settings: "pkna";
}
/* @note: line-heightをremで指定するとIEで崩れる */
.h1,
.h2,
.h3 {
	line-height: 1.4;
	letter-spacing: .05em;
	text-align: center;
}
.h1,
.h2 { margin-bottom: 15px; }
.h3 { margin-bottom: 10px; }
.h4 {
	margin-bottom: 10px;
	font-size: 1.5rem;
	line-height: 1.6;
	letter-spacing: .05em;
}
.h4__sub {
	margin-left: 1em;
	font-size: 1.2rem;
}
.h5 {
	margin-bottom: 8px;
	line-height: 1.5;
}

/* Main */
.h-main {
	display: block;
	margin-top: .5em;
}

/* English */
.h-en {
	line-height: 1;
	letter-spacing: .05em;
	font-family: Caveat, Roboto, -apple-system, BlinkMacSystemFont, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
.h-en--h1, 
.h-en--h2 {
	display: inline-block;
	transform: rotate(-3deg);
	font-size: 3.2rem;
	word-break: break-all;
}
.h-en--h3 { font-size: 2.3rem; }

/* Hash */
.h-hash:before {
	content:"#";
	font-size: .8em;
	margin-right: .25em;
	speak: none;
}

/* Line
@note:
2行以上は線が消えるので、文字サイズを大きくして確認する
2行以上にしたい時は、.h-line__innerに適宜幅を指定する
 */
.h-line { overflow: hidden; }
.h-line--center { text-align: center; }
.h-line__inner {
	position: relative;
	display: inline-block;
}
.h-line__inner--center {
	padding-right: 10px;
	padding-left: 10px;
}
.h-line__inner--left { padding-right: 10px; }
.h-line__inner:before,
.h-line__inner:after {
	content: "";
	position: absolute;
	top: 50%;
	height: 2px;
	width: 4096px;
	width: 100vw;
	margin-top: -1px;
	background-color: #3d3e50;
}
.h-line__inner:before { right: 100%; }
.h-line__inner:after { left: 100%; }

/* Section
   ---------------------------------- */
.section {
	padding-top: 15px;
	padding-bottom: 15px;
}

@media (min-width: 48em) {
	/* Heading
	   ---------------------------------- */
	.h1 {
		margin-bottom: 40px;
		font-size: 2.2rem;
	}
	.h2 {
		margin-bottom: 40px;
		font-size: 1.8rem;
	}
	.h3 {
		margin-bottom: 20px;
		font-size: 1.8rem;
	}
	.h4 {
		margin-bottom: 20px;
		font-size: 2rem;
	}
	.h4__sub { font-size: 1.4rem; }
	.h-main { margin-top: 1em; }

	/* English */
	.h-en--h1,
	.h-en--h2 { font-size: 6.8rem; }
	.h-en--h3 { font-size: 5.2rem; }
	
	/* Line */
	.h-line__inner--center {
		padding-right: 20px;
		padding-left: 20px;
	}
	.h-line__inner--left { padding-right: 20px; }

	/* Section
	   ---------------------------------- */
	.section {
		padding-top: 60px;
		padding-bottom: 60px;
	}
}

/*------------------------------------*\
   Footer
\*------------------------------------*/

/* Copyright
   ---------------------------------- */
.copyright {
	display: block;
	margin-bottom: 0;
	text-align: center;
	line-height: 1;
}
.copyright small { font-size: 100%; }




/*============================================================================*\
   $Object -- Components
\*============================================================================*/

/*------------------------------------*\
   Buttons
\*------------------------------------*/
.btn {
	display: inline-block;
	overflow: visible;
	position: relative;
	max-width: 100%;
	margin: 0 3px 3px 0;
	padding: .64285714285em 50px .64285714285em 1.42857142857em;
	border-radius: 0;
	font-weight: bold;
	font-family: -apple-system, BlinkMacSystemFont, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	line-height: 1.3;
	text-align: center;
	text-decoration: none !important;
	vertical-align: middle;
	letter-spacing: .05em;
	-moz-font-feature-settings: "pkna";
	-webkit-font-feature-settings: "pkna";
	font-feature-settings: "pkna";
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	transition: .2s;

	/* base theme */
	border: 2px solid #3d3e50;
	box-shadow: 3px 3px 0 0 #3d3e50;
	background-color: #fff;
	color: #3d3e50;
}
.btn:not(:disabled) { cursor: pointer; }
.btn:after {
	content: "";
	position: absolute;
	top: 50%;
	right: 10px;
	width: 30px;
	height: 10px;
	margin-top: -5px;
	background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2271%22%20height%3D%2213%22%20viewBox%3D%220%200%2071%2013%22%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill%3Anone%3Bstroke%3A%233d3e50%3Bstroke-miterlimit%3A10%3Bstroke-width%3A2px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpolyline%20class%3D%22a%22%20points%3D%220%209%2036%209%2022%202%2022%2013%22%2F%3E%3Cpolyline%20class%3D%22a%22%20points%3D%2241%207.1%2066.9%207.1%2057%202%2057%209.9%22%2F%3E%3C%2Fsvg%3E') no-repeat right top; /* ../img/icon_arrow.svg */
	vertical-align: middle;
	transform: rotate(-5deg);
	transition: .2s;
}
.btn:focus:after,
.btn:hover:after { transform: translateX(2.5px); }
.btn:active:after { transform: translateX(5px) rotate(5deg); }

/* Sizes
   ---------------------------------- */
.btn--large { font-size: 1.6rem; }

/* Group
   ---------------------------------- */
.btn-group-item + .btn-group-item { margin-top: -5px; }

@media (min-width: 48em) {
	.btn { padding: .90625em 76px .90625em 1.8125em; }
	.btn:after {
		right: 20px;
		width: 41px;
		height: 13px;
		margin-top: -6.5px;
		background-position: left top;
	}

	/* Sizes
	   ---------------------------------- */
	.btn--large { font-size: 1.8rem; }
}

/*------------------------------------*\
   Background
\*------------------------------------*/
/*
@note: 可読性の悪いテキストの背景に使用します
*/
.bg-base { background-color: #fff; }

@media (min-width: 66.875em) {
	.bg-base-lg { background-color: #fff; }
}



/*============================================================================*\
   $Object -- Utilities（原則編集禁止）
\*============================================================================*/

/* Widths */
.u-w100 { width: 100%; }
.u-w80 { width: 80%; }
.u-w75 { width: 75%; }
.u-w66 { width: 66%; }
.u-w60 { width: 60%; }
.u-w50 { width: 50%; }
.u-w40 { width: 40%; }
.u-w33 { width: 33%; }
.u-w25 { width: 25%; }
.u-w20 { width: 20%; }
.u-w10 { width: 10%; }

/* Lists */
/*ul,ol*/.list-flat,
/*ul,ol*/.list-inline { list-style: none; padding-left: 0; }
/*ul,ol*/.list-inline li { display: inline; margin-right: .5em; }
/*dl*/.list-flat dt { font-weight: normal; }
/*dl*/.list-flat dd { margin-left: 0; }

/* Margins */
.mtxs { margin-top: 10px!important; }
.mbxs { margin-bottom: 10px!important; }
.m0,.mt0,.mv0 { margin-top: 0!important; }
.m0,.mr0,.mh0 { margin-right: 0!important; }
.m0,.mb0,.mv0 { margin-bottom: 0!important; }
.m0,.ml0,.mh0 { margin-left: 0!important; }
.mts { margin-top: 15px!important; }
.mrs { margin-right: 15px!important; }
.mbs { margin-bottom: 15px!important; }
.mls { margin-left: 15px!important; }
.mtm { margin-top: 15px!important; }
.mrm { margin-right: 15px!important; }
.mbm { margin-bottom: 15px!important; }
.mlm { margin-left: 15px!important; }
.mtl { margin-top: 15px!important; }
.mrl { margin-right: 15px!important; }
.mbl { margin-bottom: 15px!important; }
.mll { margin-left: 15px!important; }
.mr1em { margin-right: 1em!important; }

@media (min-width: 48em) {
	.mts { margin-top: 20px!important; }
	.mrs { margin-right: 20px!important; }
	.mbs { margin-bottom: 20px!important; }
	.mls { margin-left: 20px!important; }
	.mtm { margin-top: 40px!important; }
	.mrm { margin-right: 40px!important; }
	.mbm { margin-bottom: 40px!important; }
	.mlm { margin-left: 40px!important; }
	.mtl { margin-top: 60px!important; }
	.mrl { margin-right: 60px!important; }
	.mbl { margin-bottom: 60px!important; }
	.mll { margin-left: 60px!important; }
}

/* Text Align & Font style */
.u-text-left { text-align: left; }
.u-text-center { text-align: center; }
.u-text-right { text-align: right; }
.u-text-justify { text-align: justify; }

/* Only for screen readers */
.u-sr {
	overflow: hidden;
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	width: 1px;
}
.u-sr:focus {
	display: block;
	top: 5px;
	left: 5px;
	clip: auto !important;
	z-index: 100000; /* Above WP toolbar. */
	width: auto;
	height: auto;
	padding: 15px 23px 14px;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
	background-color: #f1f1f1;
	color: #21759b;
	font-size: 1.4rem;
	font-weight: bold;
	line-height: normal;
	text-decoration: none;
}

/* 読み上げない */
.u-sr-no { speak: none; }

/* Hyperlink icon */
.i-blank:before{
	content: "";
	display: inline-block;
	width: 11px;
	height: 11px;
	margin: 0 .3em;
	background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2211%22%20height%3D%2211%22%20viewBox%3D%220%200%2011%2011%22%3E%3Cpath%20d%3D%22M3%200v3H0v8h8V8h3V0H3zm4%2010H1V5h2v3h4v2zm3-3H4V2h6v5z%22%20fill%3D%22%233d3e50%22%2F%3E%3C%2Fsvg%3E') no-repeat; /* ../img/icon_window.svg */
	vertical-align: middle;
}