@charset "UTF-8";

/* web fonts */
@import url(http://fonts.googleapis.com/css?family=Courgette);
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

/*
 * cmn_layout.css
 *
 */


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

/* !Reseting
---------------------------------------------------------- */
body {
	font-family:"メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 16px;
	-webkit-text-size-adjust: none;
	line-height: 1.5;
	color: #111;
	background: url(../img/bg.png) repeat left top;
}
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%; 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, input
{ outline: none; }
input, textarea
{ border-radius: 0; font-family:"メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
input[type="button"],input[type="submit"]
{ -webkit-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;}
/* !Clearfix
---------------------------------------------------------- */
.clearfix,
#header,
#contents,
section,
.box_layout01,
.box_column01,
.list_inline01
{
	display: block;
	min-height: 1%;
}
.clearfix:after,
#header:after,
#contents:after,
section:after,
.box_layout01:after,
.box_column01:after,
.list_inline01:after
{
	clear: both;
	content:".";
	display: block;
	height: 0;
	visibility: hidden;
}
/* !Layout
---------------------------------------------------------- */
html { overflow-y: scroll;}
body { text-align: center;}
@media print {
	html,
	html body { *zoom: 0.65;}
}
/* !wrapper
---------------------------------------------------------- */
#wrapper {
}
@media screen and (max-width:767px){
#wrapper {
}
}

/* !contents
---------------------------------------------------------- */
.row {
   width: 100%;
   max-width: 1280px;
   margin: 0 auto;
}
.contents {
	margin: 0 auto;
	max-width: 1280px;
	text-align: left;
	position: relative;
}
	#.main {
		width: 100%;
		margin-top: 20px;
	}
@media screen and (max-width:767px){
.contents {
	padding: 0;
}
	.main {
		float: none;
		width: auto;
		padding: 10px;
	}
}

/* !見出し
---------------------------------------------------------- */
.Tit-H {
   text-align: center;
   font-size:36px;
   font-family: 'ヒラギノ明朝 Pro W3','Hiragino Mincho Pro','HiraMinProN-W3','ＭＳ 明朝','MS Mincho',serif;
   color: #000;
}

.Tit-H_Alphabet {
   text-align: center;
   font-size:36px;
   font-family: 'Courgette', cursive;
}

/* !Table
---------------------------------------------------------- */
.table_basic01 {
	width: 100%;
	border-collapse: separate;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
}
	.table_basic01 th,
	.table_basic01 td {
		border-right: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		padding: 10px 15px;
		background-color: #fff;
	}
	.table_basic01 th {
		background-color: #f0f0f0;
	}
	.table_basic01 td {
	}
@media screen and (max-width:767px){
.table_basic01 {
	width: 100%;
}
	.table_basic01,
	.table_basic01 thead,
	.table_basic01 tbody,
	.table_basic01 tr,
	.table_basic01 th,
	.table_basic01 td {
		width: 100%;
		display: block;
	}
	.table_basic01 th,
	.table_basic01 td {
		border-top: none;
		border-left: none;
	}
	.table_basic01 th {
	}
	.table_basic01 td {
	}
}

/* !Box
----------------------------------------------------------- */
.box_layout01 {
}
	.box_layout01 figure.flImgL,
	.box_layout01 figure.flImgR {
		width: 280px;
	}
@media screen and (max-width:767px){
.box_layout01 {
}
	.box_layout01 figure.flImgL,
	.box_layout01 figure.flImgR {
		float: none;
		margin: 0;
		width: auto;
	}
	.box_layout01 figure.layoutExchange {
		display: table-footer-group;
	}
	.box_layout01 figure.layoutExchange + * {
		display: table-header-group;
	}
}
.box_column01 {
	margin: -16px 0 0 0;
}
	.box_column01 .col {
		float: left;
	}
	.box_column01.col2 .col {
		margin: 16px 2.2% 0 0;
		width: 48.9%;
	}
	.box_column01.col3 .col {
		margin: 16px 2.2% 0 0;
		width: 31.85%;
	}
	.box_column01.col4 .col {
		margin: 16px 2.2% 0 0;
		width: 23.35%;
	}
	.box_column01.col5 .col {
		margin: 16px 2.2% 0 0;
		width: 18.24%;
		border: 1px solid #CCC;
		padding: 10px;
	}
	.box_column01.col2 .col:nth-child(2n),
	.box_column01.col3 .col:nth-child(3n),
	.box_column01.col4 .col:nth-child(4n),
	.box_column01.col5 .col:nth-child(5n) {
		margin-right: 0;
	}
	.box_column01.col2 .col:nth-child(2n+1),
	.box_column01.col3 .col:nth-child(3n+1),
	.box_column01.col4 .col:nth-child(4n+1),
	.box_column01.col5 .col:nth-child(5n+1) {
		clear: both;
	}
	.box_column01 a {
		text-decoration: none;
	}
	.box_column01 figure {
	}
	.box_column01 .inner {
		background-color: #;
		padding-top: 4px;
	}
		.box_column01 .inner .tit {
			margin-bottom: 8px;
			color: #248b9a;
			font-size: 115%;
			font-weight: bold;
		}
		.box_column01 .inner p {
			color: #000;
		}
@media screen and (max-width:767px){
.box_column01  {
	margin: 0;
}
	.box_column01 .col,
	.box_column01.col2 .col,
	.box_column01.col3 .col,
	.box_column01.col4 .col {
		float: none;
		width: auto;
		margin: 0;
		padding: 10px 0;
	}
	.box_column01.col5 .col {
		float: none;
		width: auto;
		margin: 0;
		padding: 10px;
	}
	.box_column01 figure {
		float: left;
		width: 100px;
		margin-right: 10px;
		width: 100%;
	}
	.box_column01 .inner {
		overflow: hidden;
		padding: 0;
		width: 100%;
	}
		.box_column01 .inner .tit {
			margin-bottom: 4px;
		}
}


/* !Listing
---------------------------------------------------------- */
.list_inline01 {
	margin-top: -10px;
}
	.list_inline01 li {
		display: inline-block;
		margin: 10px 20px 0 0;
	}
	.list_inline01 li:last-child {
		margin-right: 0;
	}
.list_inline01 {
}
	.list_inline01.col2 li {
		width: 49.9%;
		float: left;
		margin-right: 0;
		position: relative;
		padding-left: 1em;
	}
		.list_inline01.col2 li .mark {
			position: absolute;
			left: 0;
			top: 0;
		}
@media screen and (max-width:767px){
.list_inline01 li {
	margin-top: 0;
}
	.list_inline01 li,
	.list_inline01.col2 li {
		display: block;
		float: none;
		margin: 10px 0;
		width: auto;
		position: relative;
	}
		.list_inline01 li .mark {
			position: absolute;
			left: 0;
			top: 0;
		}
}

/* !Btn
----------------------------------------------------------- */
.btn_basic01 {
	width: 100%;
	padding: 0 63px;
	height: 80px;
	display: table;
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	text-align: center;
	line-height: 1.5;
	background-color: #F8B551;
	background-image: url(../img/ico_arrow_r02_pc.png);
	background-position: 18px center;
	background-repeat: no-repeat;
}
.btn_basic01 span {
	display: table-cell;
	vertical-align: middle;
}
.btn_basic01:hover {
	color: #fff;
	background-color: #FF6666;
}
.btn_basic01 span {
	display: table-cell;
	vertical-align: middle;
}
@media screen and (max-width:767px){
.btn_basic01 {
	position: relative;
	padding: 0 30px;
	background-image: none;
}
.btn_basic01:after {
	content: '';
	display: block;
	width: 7px;
	height: 10px;
	position: absolute;
	right: 18px;
	top: 50%;
	margin-top: -5px;
	background: url(../img/ico_arrow_r02_sp.png) left top no-repeat;
	background-size: 7px 10px;
	-webkit-background-size: 7px 10px;
	-moz-background-size: 7px 10px;
}
}

/* !Header Styles
---------------------------------------------------------- */
header {
	height:auto;
}

/* primary navigation
--------------------------------------------------------------------- */
#nav-wrap ul, #nav-wrap li, #nav-wrap a {
   margin: 0;
   padding: 0;
   border: none;
   outline: none;
}

/* nav-wrap */
#nav-wrap {
   font: 12px;
   width: 100%;
   text-transform: uppercase;
   letter-spacing: 2.5px;
   margin: 0 auto;
   z-index: 100;
   position: fixed;
   left: 0;
   top: 0;
}
.opaque { background-color: #FFF; opacity: 0.9; }

/* hide toggle button */
#nav-wrap > a.mobile-btn { display: none; }

ul#nav {
   min-height: 48px;
   width: auto;
   /* center align the menu */
   text-align: center;
}
ul#nav li {
   position: relative;
   list-style: none;
   height: 48px;
   display: inline-block;
}

/* Links */
ul#nav li a {

/* 8px padding top + 8px padding bottom + 32px line-height = 48px */
   display: inline-block;
   padding: 8px 13px;
   line-height: 32px;
   text-decoration: none;
   text-align: left;
   color: #000;
   -webkit-transition: color .2s ease-in-out;
   -moz-transition: color .2s ease-in-out;
   -o-transition: color .2s ease-in-out;
   -ms-transition: color .2s ease-in-out;
   transition: color .2s ease-in-out;
}

ul#nav li a:hover {
   color: #FF0000;
}

ul#nav li a:active { background-color: transparent !important; }
ul#nav li.current a { color: #FF0000; }

/* !汎用コンテンツ
---------------------------------------------------------- */
.cmn_cont {
	overflow: hidden;
}

.option li {
   display: inline-block;
   margin: 3px 2px;
   padding: 4px 10px 2px 10px;
   color: #FFF;
   background-color: #000;
   font-size: 12px;
}

.option2 li {
   display: inline-block;
   margin: 3px 2px;
   padding: 4px 10px 2px 10px;
   color: #FFF;
   background-color: #FFBF00;
   font-size: 12px;
}

/* !Footer
---------------------------------------------------------- */
footer {
   padding-top: 28px;
   padding-bottom: 28px;
   position: relative;
}

/* Go To Top Button */
#go-top {
   position: absolute;
   top: -24px;
   left: 50%;
   margin-left: -30px;
}
#go-top a {
   text-decoration: none;
   border: 0 none;
   display: block;
   color: #fff;
   text-decoration: none;
   padding-top: 10px;
   width: 42px;
   height: 42px;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   border-radius: 50%;
   background-color: #FF6666;
}
#go-top a:hover {
   color: #FFF; 
   background-color: #F8B551;
}

/* !Fonts -------------------------------------------------------------- */
.fwB { font-weight: bold;}
.fcP { color: #EB6877;}
.fcR { color: #FF0000;}
.fzSS  { font-size:  72%;}/* base 14px -> 10px */
.fzS   { font-size:  86%;}/* base 14px -> 12px */
.fzM   { font-size: 100%;}
.fzL   { font-size: 115%;}/* base 14px -> 16px */
.fzLL  { font-size: 129%;}/* base 14px -> 18px */
.fzLLL { font-size: 143%;}/* base 14px -> 20px */

/* !Margin ------------------------------------------------------------------ */
.mt10 { margin-top:10px !important;}
.mt20 { margin-top:20px !important;}
.mt30 { margin-top:30px !important;}
.mt40 { margin-top:40px !important;}
.mt50 { margin-top:50px !important;}
.mt60 { margin-top:60px !important;}
.mt70 { margin-top:70px !important;}
.mt80 { margin-top:80px !important;}
.mt100 { margin-top:100px !important;}
.mt160 { margin-top:160px !important;}
.mb10 { margin-bottom:10px !important;}
.mb20 { margin-bottom:20px !important;}
.mb30 { margin-bottom:30px !important;}
.mb40 { margin-bottom:40px !important;}
.mb50 { margin-bottom:50px !important;}
.mb60 { margin-bottom:60px !important;}
.mb70 { margin-bottom:70px !important;}
.mb80 { margin-bottom:80px !important;}

/* !Inline Align ------------------------------------------------------------ */
.taC { text-align: center !important;}
.ImgC { display: block; margin-left: auto; margin-right: auto;}
/* !Padding  ---------------------------------------------------------------- */
.pt80 { padding-top:80px !important;}
.pt15per { padding-top:15% !important;}
/* !Width ------------------------------------------------------------------- */
.w15per { width: 15% !important;}
.w25per { width: 25% !important;}
.w50per { width: 50% !important;}
.wAuto { width: auto !important;}
/* !Floats ------------------------------------------------------------------ */
.flL    { display: inline; float: left;}
.flR    { display: inline; float: right;}

/* !印刷用 ------------------------------------------------------------------ */
header {
   display: none;
}