@charset"utf-8";
/*
観光人材育成コンテンツ 2021 Web Site  --  Primary CSS
Latest Updated : 18  Mar. 2022
*/

/**
 * Table of Contents
 *
 * 1.0 - Typography
 * 2.0 - Elements
 * 3.0 - Alignment
 * 4.0 - Links
 * 5.0 - layout
 * 6.0 - clearfix
 * 7.0 - .single
 * ex. - Media Queries
 *
 */

/* **************************************************************************** */
/*
/* 1.0 Typography
/*
/* **************************************************************************** */


/**
 * 1.1 Import fonts
 */
 
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap');




/**
 * 1.2 Typo
 */

body,
button,
input,
select,
textarea {
	font-family: "Roboto", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ ゴシック", sans-serif;
	font-size: 14px; font-size: 1.4rem;
	line-height: 1;
	color: #000;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	font-weight: 700;
}
h1 + h2,
h2 + h3,
h3 + h4,
h4 + h5,
h5 + h6 { margin-top:0 !important;}

h1	{ font-size:2.4rem;}
h2	{ font-size:2.3rem;}
h3	{ font-size:2.0rem;}
h4	{ font-size:1.7rem;}
h5	{ font-size:1.4rem;}
h6	{ font-size:1.4rem;}

article h1,
article h2	{ margin:2em 0 1.5em; line-height:1.5;}
article h3,
article h4	{ margin:3em 0 1em; line-height:1.5;}
article h5,
article h6	{ margin:2em 0 1em; line-height:1.5;}

section h1:first-child, section h2:first-child, section h3:first-child, section h4:first-child, section h5:first-child, section h6:first-child,
.content h1:first-child, .content h2:first-child, .content h3:first-child, .content h4:first-child, .content h5:first-child, .content h6:first-child,
.page-content h1:first-child, .page-content h2:first-child, .page-content h3:first-child, .page-content h4:first-child, .page-content h5:first-child, .page-content h6:first-child,
.entry-content h1:first-child, .entry-content h2:first-child, .entry-content h3:first-child, .entry-content h4:first-child, .entry-content h5:first-child, .entry-content h6:first-child,
.section-content h1:first-child, .section-content h2:first-child, .section-content h3:first-child, .section-content h4:first-child, .section-content h5:first-child, .section-content h6:first-child 
{ margin-top:0 !important;}

p {}
article p { margin-bottom:1.6em; line-height:1.8;}

b,
strong 	{ font-weight: 700;}

em		{ font-style: normal;}

dfn,
cite,
i { font-style: italic;}

blockquote {
	border-left: 4px solid #707070;
	border-left: 4px solid rgba(51, 51, 51, 0.7);
	color: #707070;
	color: rgba(51, 51, 51, 0.7);
	font-size: 18px;
	font-size: 1.8rem;
	font-style: italic;
	line-height: 1.6667;
	margin-bottom: 1.6667em;
	padding-left: 0.7778em;
}

blockquote p { margin-bottom: 1.6667em;}
blockquote > p:last-child { margin-bottom: 0;}

blockquote cite,
blockquote small {
	color: #333;
	font-size: 15px;
	font-size: 1.5rem;
	font-family: "Noto Sans", sans-serif;
	line-height: 1.6;
}

blockquote em,
blockquote i,
blockquote cite {
	font-style: normal;
}

blockquote strong,
blockquote b {
	font-weight: 400;
}

address {
	font-style: normal;
	margin: 0;
}

code,
kbd,
tt,
var,
samp,
pre {
	font-family: Inconsolata, monospace;
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

pre {
	background-color: transparent;
	background-color: rgba(0, 0, 0, 0.01);
	border: 1px solid #eaeaea;
	border: 1px solid rgba(51, 51, 51, 0.1);
	line-height: 1.2;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 0.8em;
	white-space: pre;
	white-space: pre-wrap;
	word-wrap: break-word;
}

abbr[title] {
	border-bottom: 1px dotted #eaeaea;
	border-bottom: 1px dotted rgba(51, 51, 51, 0.1);
	cursor: help;
}

mark,
ins 	{ background-color: #fff9c0; text-decoration: none;}

sup,
sub 	{ font-size: 75%; height: 0; line-height: 0; position: relative; vertical-align: baseline;}
sup		{ bottom: 1ex;}
sub		{ top: .5ex;}

small	{ font-size: 75%;}

big		{ font-size: 125%;}




/**
 * - 1.3 Lists
 */

ul,
ol { margin: 1.6em 0 1.6em; list-style-position:outside; line-height:1.5;}

ul { margin-left:0.7em; list-style: none;}

ol { margin-left:1.5em; list-style: decimal;}

li > ul,
li > ol {
	margin: 1em 0 1em 1.3333em;
}
li > ol li:before { content:''; width:0; height:0; border:0 !important;}

nav ul { margin:0;}
h1 + ul,
h2 + ul,
h3 + ul,
h4 + ul,
h5 + ul,
h6 + ul,
h1 + ol,
h2 + ol,
h3 + ol,
h4 + ol,
h5 + ol,
h6 + ol { margin-top:0 !important;}

ul.reset,
ul.reset li,
ol.reset,
ol.reset li { margin:0 !important; padding:0 !important; list-style:none !important; line-height:1.5;}
ul.reset li:before,
ul.reset li:after { content:''; width:0; height:0; border:0 !important;}

/* Unoedered list */
article ul li { position:relative; margin:0 0 0.8em; padding-left:10px;}
article ul li:before { position:absolute; content:''; top:0.4em; left:0; width:4px; height:4px; background-color:#000; border-radius:100%;}
article ol li { position:relative; margin:0 0 0.8em;}


/* Ordered list */
article ol li { position:relative; margin:0 0 0.8em;}
article ol ul { margin-left:0.4em;}


/* Definition list */
dl { margin-bottom: 1.6em; line-height:1.5;}
dt { margin-bottom: 0.6em; font-weight: bold;}
dd { padding-bottom: 1.6em;}

dl.bb	{ border:0; border-top:1px solid rgba(0,0,0,.25);}
dl.bb dt	{ padding-top: 1.6em;}
dl.bb dd	{ padding-bottom: 1.6em; border-bottom:1px solid rgba(0,0,0,.25);}



/**
 * - 1.4 Table
 */

table,
th,
td {
	border: 1px solid #38C1F8;
}

table {
	border-collapse:collapse;
	border-spacing: 0;
	border-width: 1px 0 0 1px;
	margin: 0 0 1.6em;
	table-layout: fixed; /* Prevents HTML tables from becoming too wide */
	width: 100%;
}

caption,
th,
td { padding: 0.8em 0.4em; text-align:left; font-weight:normal;}
th { border-width:1px; font-weight: 700;}
td { border-width:1px; background-color:#fff;}

caption { margin:0.3em 0; font-size:90%; caption-side:bottom;}

thead th { vertical-align:middle; font-weight:bold; color:#fff; background-color:#30b4e8; border-right-color:#fff; border-bottom-color:#fff;}
thead th:last-child	{ border-right-color:#38C1F8;}
thead td { vertical-align:middle; background-color:#bce9fb;}

tbody th { vertical-align:middle; background-color:#bce9fb;}
tbody td { vertical-align:middle; border-color:#38C1F8; border-width:1px 1px 1px 1px;}

tfoot 	 { border-top:3px double #38C1F8;}
tfoot th { vertical-align:middle; font-weight:bold; color:#fff; background-color:#30b4e8; border-right-color:#fff; border-bottom-color:#fff;}
tfoot th:last-child	{ border-right-color:#38C1F8;}
tfoot td { vertical-align:middle; background-color:#bce9fb;}

table ul,
table ol { margin:.6em 0 .6em 0em; list-style-position:outside; line-height:1.25;}
table ul li:before { top:4px !important;}

table.text-align-center,
table.text-align-center th,
table.text-align-center td,
tr.center th,
tr.center td,
th.center,
td.center { text-align:center;}

.yscroll	{ width:100%; overflow:scroll;}
.yscroll table	{ table-layout:auto;}
.yscroll::-webkit-scrollbar			{ height: 5px;}
.yscroll::-webkit-scrollbar-track	{ background: #F1F1F1;}
.yscroll::-webkit-scrollbar-thumb	{ background: #BCBCBC;}




/**
 * - 1.5 Decoration
 */

.not	{ margin-top:0 !important; vertical-align:top;}
.nor	{ margin-right:0 !important;}
.nob	{ margin-bottom:0 !important;}
.nol	{ margin-left:0 !important;}

.nobt	{ border-top:none !important;}
.nobr	{ border-right:none !important;}
.nobb	{ border-bottom:none !important;}
.nobl	{ border-left:none !important;}

.bt		{ border-top:1px solid #ccc !important;}
.br		{ border-right:1px solid #ccc !important;}
.bb		{ border-bottom:1px solid #ccc !important;}
.bl		{ border-left:1px solid #ccc !important;}

.lead 	{ font-size:1.6rem;}
.attention { color:#f00;}
.note		{ font-size:13px; font-size:1.3rem; line-height:1.5; color:#666;}
.caption	{ font-size:13px; font-size:1.3rem; line-height:1.5; color:#666;}
.wp-caption-text{ margin:0.8rem 1.2rem 1.6rem; font-size:13px; font-size:1.3rem; line-height:1.5 !important; color:#666;}

.border 	{ border-bottom:1px solid #999;}
.bordered 	{ padding:0.8em; border:1px solid #6699FF; border-radius:5px;}
.filled		{ padding:0.5em 0.8em; background-color:#ededed;}
.filledwrap .filled { background-color:#fff;}

/* color */
.dark	{ color:#000;}
.pale	{ color:#999;}

/* family */
.serif	{ font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
.sans	{ font-family: "Roboto", Helvetica, sans-serif;}

/* style */
.normal	{ font-style: normal;}
.italic	{ font-style: italic;}





/* **************************************************************************** */
/*
/* 2.0 Elements
/*
/* **************************************************************************** */

::selection {background:#38C1F8; color:#fff;}
::-moz-selection { background:#38C1F8; color:#fff;}

hr {
	background-color: #eaeaea;
	background-color: rgba(51, 51, 51, 0.1);
	border: 0;
	height: 1px;
	margin-bottom: 1.6em;
}
hr.none { background-color:transparent;}

img {
	-ms-interpolation-mode: bicubic;
	border: 0;
	height: auto;
	max-width: 100%;
	vertical-align: bottom;
}
.image img { width:100%;}

figure 		{ margin:0; padding:0;}
figure img 	{ width:100%; height:auto;}
figcaption 	{}

del { opacity: 0.8;}





/* **************************************************************************** */
/*
/* 3.0 Alignments
/*
/* **************************************************************************** */

.alignleft {
	display: inline;
	float: left;
	margin:0 2.6rem 1rem 0;
}

.alignright {
	display: inline;
	float: right;
	margin:0 0 1rem 2.6rem;
}

.aligncenter {
	display: block;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 1rem;
}

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




/* **************************************************************************** */
/*
/* 4.0 Links
/*
/* **************************************************************************** */

a {
	color: #000;
	text-decoration: none;
	outline:none;
	transition:all 0.2s ease;
}

a:hover,
a:focus {
	color:#38C1F8;
}

nav a { text-decoration:none;}

.btn 	{ padding:1em 0; text-align:center;}
.btn a	{ position:relative; display:inline-block; margin:8px; padding:1.2em 2em; min-width:200px; font-size:110%; color:#fff; background-color:#6DD400; border-radius:3px;}
.btn a:hover	{ opacity:0.5;}
.btn.outbound a:before	{ position:absolute; top:5px; right:10px; content:''; width:12px; height:10px; border:2px solid #fff;}
.btn.outbound a:after	{ position:absolute; top:8px; right:13px; content:''; width:12px; height:10px; border:solid #fff; border-width:0 0 2px 2px;}


/*
 * drawer navigation
 */

.drawer-container	 {}
.drawer-container ul,
.drawer-container li	 { margin:0; padding:0; list-style:none;}
.drawer-nav		{ 
	position:relative; position:fixed; top:0; right:-100vw; z-index:999;
	padding:33vh 0 0; width:50%; height:auto; 
	color:#222; 
	background-color:transparent; overflow-y:auto; border-radius:0;
	visibility:visible; opacity:1;
	transform:scale(1) translateY(0); transition:all .2s cubic-bezier(.19,1,.22,1); 
	-webkit-overflow-scrolling:touch; 
}
.drawer-overlay	{ position:fixed; z-index:-101; top:0; left:0; width:100%; height:100%; background-color:rgba(242,242,242,0); transition:all 0.25s;}
.drawer-open .drawer-overlay	{ z-index:998; background-color:rgba(242,242,242,0.9);}
.drawer-open #container	{}

.drawer-hamburger		{ 
	position:fixed; top:40vh; right:-44px; z-index:998;
	display:block; margin:0 !important; padding:0 !important; width:88px; max-width:88px; height:88px;
	font-size:0; 
	border:0; outline:0; background-color:#38C1F8; box-sizing:content-box; cursor:pointer;
	-webkit-transition:all .6s cubic-bezier(.19,1,.22,1); transition:all .2s cubic-bezier(.19,1,.22,1); 
	transform:translateZ(0) rotate(45deg); 
}
.drawer-hamburger:hover	{}
.drawer-hamburger-icon	{ position:relative; display:block; transform:rotate(-45deg);}
.drawer-hamburger-icon:before	{ position:absolute; top:-6px; left:5px; content:"menu"; font-size:1.2rem; color:#fff; }
.drawer-hamburger-icon:after	{ position:absolute; top:-5.5px; left:-10px; content:''; width:10px; height:10px; border:solid #fff; border-width:1px 0 0 1px; transform:rotate(-45deg);}

.drawer-open .drawer-hamburger { right:calc(50vw - 45px);}
.drawer-open .drawer-hamburger-icon	{}
.drawer-open .drawer-nav {
	display:block; top:0; right:0; z-index:999; visibility:visible;
	transform:scale(1); opacity:1;
}

.drawer-nav ul.menu	{ margin:0; padding:0;}
.drawer-nav ul.menu li	{ margin:0; text-align:center; font-size:1.3rem; font-weight:normal; letter-spacing:0em; text-transform:capitalize; background-color:#38C1F8; border-bottom:1px solid #fff;}
.drawer-nav ul.menu li:last-child	{ border:0;}
.drawer-nav ul.menu li a	{ position:relative; display:block; padding:16px 10px 20px; color:#fff; text-decoration:none; background-color:transparent;}
.drawer-nav ul.menu li a:after	{ position:absolute; bottom:8px; left:50%; content:''; margin:0 0 0 -4px; width:8px; height:8px; border:solid #fff; border-width:0 1px 1px 0; transform:rotate(45deg);}
.drawer-nav ul.menu li a:hover	{ background-color:rgba(0,0,0,.25);}
.single .drawer-nav ul.menu li a	{ padding:20px 10px 20px;}
.single .drawer-nav ul.menu li a:after	{ bottom:calc(50% - 5px); left:8px; margin:0;border-width:0 0 1px 1px;}

.home .drawer-container.hidden .drawer-nav,
.home .drawer-container.hidden .drawer-hamburger	 { right:-100vw !important;}

@media screen and (min-width: 720px) {

	.drawer-open .drawer-hamburger { right:calc(30vw - 45px);}
	.drawer-nav		{ padding:33vh 0 0; width:30%; height:auto; }
	.drawer-nav ul.menu li		{ font-size:1.5rem;}
	.drawer-nav ul.menu li a	{ padding:20px 10px 26px;}

}

@media screen and (min-width: 1024px) {
	.drawer-hamburger	{ display:none;}
	.drawer-nav {
		display:block; top:0; right:0; z-index:999; visibility:visible;
		width:12%; max-width:130px;
		transform:scale(1); opacity:1;
	}
}




/* **************************************************************************** */
/*
/* 5.0 layout
/*
/* **************************************************************************** */

body{
	padding:4px;
	text-align:center;
	background:#38C1F8;
}
#wrapper 	{ background:#EBFAFF url(../img/common/personnel-bg-s.png) no-repeat center top / 100% auto;}
	


/**
 * - 5.2 Header Include
 */

#headerwrap 	{ position:relative; z-index:1;}
#header 		{}
#headerwrap .ktf	{ position:absolute; top:0; right:0;}
#headerwrap .ktf a	{ display:inline-block; padding:10px 18px; font-size:1.3rem; line-height:1; letter-spacing:0.1em; font-weight:700; color:#fff; background-color:#38C1F8;}
#headerwrap .ktf a:before	{ position:absolute; top:calc(50% - 6px); right:8px; content:''; width:4px; height:6px; background-color:#fff; transform:skewX(25deg);}
#headerwrap .ktf a:after	{ position:absolute; top:50%; right:8px; content:''; width:4px; height:6px; background-color:#fff; transform:skewX(335deg);}

.site-header{ padding:0 1rem ;}
.site-header:after { position:absolute; top:50vh; left:4px; content:''; width:32px; height:350px; background:url(../img/common/personnel-up.png) no-repeat center bottom / 30px;}
#branding .site-title	{ 
	position:relative;
	margin:0; padding:0; font-size:0rem; text-align:center;
}
#branding .site-title a	{ 
	position:relative;
	display:inline-block; vertical-align:middle; width:150px; height:200px;
	background:url(../img/common/branding-page.png) no-repeat center bottom / 150px auto;
}

.home #branding .site-title	{ 
	margin:0; padding:80px 0 0;
}
.home #branding .site-title a	{ 
	display:inline-block; vertical-align:middle; width:200px; height:300px;
	background:url(../img/common/branding-home-s.png) no-repeat center top / 200px auto;
}

#headerwrap .content	{ 
	position:relative;
	margin:0 auto; padding:80px 10%;
	text-align:left; font-size:1.5rem; line-height:2.1;
}



/**
 * - 5.3 footer Include
 */

#footerwrap 	{ position:relative; z-index:3; padding:70px 0 0 0; background-color:#A1DDF6;}

.site-footer	{ position:relative; z-index:3; padding:0; font-size:1.4rem; text-align:center; color:#0E67AA;}
.site-footer-title		{ margin:0 0 1em; font-size:1.5rem; line-height:1.3; font-weight:700;}
.site-footer-title b	{ font-size:1.7rem;}
.site-footer address	{ line-height:1.8;}
.site-footer .tel,
.site-footer .fax	{ margin:0 0.5em;}
.site-footer a	{ color:#0E67AA;}
.site-footer a:hover	{ color:#38C1F8;}
	#copyright		{ padding:50px 0;}
	#copyright p	{ margin:0; font-family:sans-serif; font-size:1.1rem; font-weight:500;}



/**
 * - 5.4 container Include
 */

#container	{ position:relative; z-index:2;}

.page-nav	{ background-color:#F5FCFF;}
.page-nav ul	{ font-size:0;}
.page-nav li	{ display:inline-block; width:50%; text-align:center; font-size:1.5rem;}
.page-nav li:first-child	{ border-right:1px solid #EBFAFF;}
.page-nav li a	{ position:relative; display:block; padding:2.5rem 0; color:#fff; background-color:#38C1F8;}
.page-nav li a:before	{ position:absolute; bottom:14px; left:calc(50% - 5px); content:''; width:8px; height:8px; border:solid #fff; border-width:0 1px 1px 0; transform:rotate(45deg);} 
.page-nav li a:hover	{ background-color:#88d7f7;}


article			{ padding:0 5%;}
section			{}

.section-title	{ position:relative; margin:0 0 1em; padding:40px 5% 0; text-align:left; color:#0E67AA;}
.section-title:before	{ position:absolute; top:0; left:5%; content:''; width:36px; height:32px; background:url(../img/common/section-title-b.svg) no-repeat 0 0 / 36px auto;}
.section-content{}

.kankou-kiso	{ padding:4rem 0 0; text-align:left;}
.kankou-kiso .kankou-list	{ margin:0 auto; padding:0 5%;}
.kankou-kiso .kankou-list ul	{ margin:0 0 5rem; padding:0; display:flex; flex-flow:row wrap; justify-content:space-between; align-items:stretch;}
.kankou-kiso .kankou-list li	{ margin:0 0 20px; padding:0 0 40px; width:46%; text-align:left; font-size:1.3rem; border-bottom:1px solid rgba(0,0,0,.25);}
.kankou-kiso .kankou-list h4	{ padding:1em 0; font-size:1.4rem;}
.kankou-kiso .kankou-list img	{ width:100%;}
.kankou-kiso .kankou-list a	{ position:relative; display:block;}
.kankou-kiso .kankou-list a:hover	{ color:#38C1F8;}
.kankou-kiso .kankou-list a img	{ transition:opacity 0.2s ease;}
.kankou-kiso .kankou-list a:hover img	{ opacity:0.6;}
.kankou-kiso .kankou-list a:before	{ position:absolute; bottom:-4px; right:3px; content:''; width:49%; height:0; border-bottom:1px solid #000; transition:width 0.2s ease;}
.kankou-kiso .kankou-list a:after		{ position:absolute; bottom:-4px; right:0; content:''; width:0; height:0; border:solid transparent; border-width:2px 6px 2px 6px; border-bottom-color:#000; border-left-color:#000;}
.kankou-kiso .kankou-list a:hover:before	{ width:30%;}

.kankou-dx	{ padding:4rem 0 0; text-align:left; background-color:#fff;}
.kankou-dx .section-title { color:#56A700;}
.kankou-dx .section-title:before	{ background-image:url(../img/common/section-title-g.svg);}
.kankou-dx h3	{ margin:0 0 1em; padding:0.4em 0; border-bottom:2px solid #56A700;}
.kankou-dx .kankou-list img	{ width:100%;}
.kankou-dx .kankou-list	{ margin:0 auto; padding:0 5%;}
.kankou-dx .kankou-list ul	{ margin:0; padding:0 0 5rem; display:flex; flex-flow:row wrap; justify-content:space-between; align-items:stretch;}
.kankou-dx .kankou-list li	{ margin:0 0 20px; padding:0 0 40px; width:46%; text-align:left; font-size:1.3rem; border-bottom:1px solid rgba(0,0,0,.25);}
.kankou-dx .kankou-list h4	{ padding:1em 0; font-size:1.4rem;}
.kankou-dx .kankou-list a	{ position:relative; display:block;}
.kankou-dx .kankou-list a:hover	{ color:#56A700;}
.kankou-dx .kankou-list a img	{ transition:opacity 0.2s ease;}
.kankou-dx .kankou-list a:hover img	{ opacity:0.6;}
.kankou-dx .kankou-list a:before	{ position:absolute; bottom:-4px; right:3px; content:''; width:49%; height:0; border-bottom:1px solid #000; transition:width 0.2s ease;}
.kankou-dx .kankou-list a:after		{ position:absolute; bottom:-4px; right:0; content:''; width:0; height:0; border:solid transparent; border-width:2px 6px 2px 6px; border-bottom-color:#000; border-left-color:#000;}
.kankou-dx .kankou-list a:hover:before	{ width:30%;}




/**
 * - 5.5 Column Layout
 */

.column	{ margin-left:auto; margin-right:auto; margin-bottom:5rem; padding:24px 5%;}
.column h1:first-child, .column h2:first-child, .column h3:first-child, .column h4:first-child, .column h5:first-child, .column h6:first-child	{ margin-top:0 !important;}
.column p:last-child	{ margin-bottom:0;}

.borderwrap { border:1px solid #38C1F8; border-radius:5px;}
	.borderwrap h1:first-child,
	.borderwrap h2:first-child,
	.borderwrap h3:first-child,
	.borderwrap h4:first-child,
	.borderwrap h5:first-child,
	.borderwrap h6:first-child { margin-top:0 !important;}

.filledwrap { background-color:#ffffff; border-radius:5px;}
	.filledwrap h1:first-child,
	.filledwrap h2:first-child,
	.filledwrap h3:first-child,
	.filledwrap h4:first-child,
	.filledwrap h5:first-child,
	.filledwrap h6:first-child { margin-top:0 !important;}

.borderwrap .content,
.filledwrap .content	{}




/* Youtube */
.video	{ margin:0;}
.video-embed-aspect-16-9 {
	position:relative;
	padding-top:56.25%;
	width:100%; height:0;
	overflow:hidden;
}
.video-embed-aspect-16-9 iframe { position:absolute; top:0; left:0; width:100%; height:100%;}






/* **************************************************************************** */
/*
/* 6.0 - clearfix
/*
/* **************************************************************************** */

.clearfix::after,
.content:after,
p:after { content:''; display:block; clear:both;}





/* **************************************************************************** */
/*
/* 7.0 - .single
/*
/* **************************************************************************** */

.single-header	{}
.single-header .single-title {}
.single-content	{ margin:0 auto;}

article	{ margin:0 auto; padding:0; max-width:1200px; text-align:left;}
article .single-title	{ margin:0 0 10px; padding:0.5em 8%; background-color:#A1DDF6;}
article .single-content	{ padding:0 0 6rem;}
article .post-thumbnail		{ margin:0 0 3rem;}
article .post-thumbnail p	{ margin:0; padding:0; text-align:right; font-size:1.2rem; line-height:1.1;}
article .post-thumbnail a	{ position:relative; display:inline-block; padding:1rem 36px 0 0;}
article .post-thumbnail a:before	{ position:absolute; bottom:0px; right:3px; content:''; width:30px; height:0; border-bottom:1px solid #000; transition:width 0.2s ease;}
article .post-thumbnail a:after		{ position:absolute; bottom:0px; right:0; content:''; width:0; height:0; border:solid transparent; border-width:2px 6px 2px 6px; border-bottom-color:#000; border-left-color:#000;}
article .post-thumbnail a:hover:before	{ width:20px;}

article .single-content .content	{ margin:0 auto; padding:0 8% 60px; border-bottom:1px solid #ccc;}

article .backbtn	{ padding:2rem 8% 2rem;}
article .backbtn a	{ position:relative; display:inline-block; padding:1rem 0 0 36px;}
article .backbtn a:before	{ position:absolute; bottom:-4px; left:3px; content:''; width:99%; height:0; border-bottom:1px solid #000; transition:width 0.2s ease;}
article .backbtn a:after		{ position:absolute; bottom:-4px; left:0; content:''; width:0; height:0; border:solid transparent; border-width:2px 6px 2px 6px; border-bottom-color:#000; border-right-color:#000;}
article .backbtn a:hover:before	{ width:50%;}




/* **************************************************************************** */
/*
/* ex. - Media Queries
/*
/* **************************************************************************** */

@-ms-viewport 	{ width: device-width;}
@viewport 		{ width: device-width;}


/**
/*  720 <=                              */
@media screen and (min-width: 720px) {

	body	{ padding:8px;}
	#wrapper 		{ background-image: url(../img/common/personnel-bg-page.png);}
	.home #wrapper 	{ background-image: url(../img/common/personnel-bg-home.png);}
	.site-header:after { top:50vh; left:4px; width:36px; height:400px; background-size:36px;}


	/**
	 *  - Navigation 	**/
	.page-nav	{ padding:40px 0;}
	.page-nav ul	{ font-size:0;}
	.page-nav li	{ margin:0 2%; width:30%;}
	.page-nav li:first-child	{ border:0;}
	.page-nav li br	{ display:none;}


	/**
	 *  - header 	**/
	#branding .site-title a	{ 
		width:200px; height:250px; background:url(../img/common/branding-page.png) no-repeat center bottom / 200px auto;
	}
	.home #branding .site-title	{ padding:100px 0 0;}
	.home #branding .site-title a	{ 
		width:300px; height:500px;
		background:url(../img/common/branding-home-l.png) no-repeat center top / 300px auto;
	}
	#headerwrap .content	{ 
		position:relative;
		padding:60px 5% 80px; max-width:662px;
		text-align:left; font-size:1.6rem; line-height:2.1;
	}


	/**
	 *  - .single 	**/
	.single-content	{ padding:0 8%;}



}



/**
/*  1024px <=                          */
@media screen and (min-width: 1024px) {

	body,
	button,
	input,
	select,
	textarea { font-size:14px; font-size: 1.4rem;}

	/**
	 *  - Typography 	**/
	h1	{ font-size:3rem;}
	h2	{ font-size:2.6rem;}
	h3	{ font-size:2rem;}
	h4	{ font-size:1.6rem;}
	h5	{ font-size:1.5rem;}
	h6	{ font-size:1.4rem;}


	/**
	 *  - footer 		**/
	#headerwrap .ktf a	{ padding:12px 20px; font-size:1.4rem;}
	.site-header:after { top:50vh; left:4px; width:40px; height:350px; background-size:40px;}

	/**
	 *  - container 	**/
	.section-title	{ padding:40px 8% 0;}
	.section-title:before	{ left:8%;}

	.kankou-kiso .kankou-list	{ margin:0 auto; padding:0 8%;}
	.kankou-kiso .kankou-list li	{ margin:0 0 30px; padding:0 0 30px; width:47%;}
	.kankou-kiso .kankou-list li div	{ display:inline-block; vertical-align:top; font-size:0;}
	.kankou-kiso .kankou-list li .thumbnail	{ margin-right:3%; width:35%;}
	.kankou-kiso .kankou-list li .content	{ width:61%;}
	.kankou-kiso .kankou-list h4	{ padding:0 0 1em; font-size:1.6rem;}
	.kankou-kiso .kankou-list p		{ font-size:1.3rem;}
	.kankou-kiso .kankou-list a:before	{ width:30%;}
	.kankou-kiso .kankou-list a:hover:before	{ width:20%;}
	
	.kankou-dx .kankou-list	{ margin:0 auto; padding:0 8%;}
	.kankou-dx .kankou-list li	{ margin:0 0 30px; padding:0 0 30px; width:47%;}
	.kankou-dx .kankou-list li div	{ display:inline-block; vertical-align:top; font-size:0;}
	.kankou-dx .kankou-list li .thumbnail	{ margin-right:3%; width:35%;}
	.kankou-dx .kankou-list li .content	{ width:61%;}
	.kankou-dx .kankou-list h4		{ padding:0 0 1em; font-size:1.6rem;}
	.kankou-dx .kankou-list p		{ font-size:1.3rem;}
	.kankou-dx .kankou-list a:before	{ width:30%;}
	.kankou-dx .kankou-list a:hover:before	{ width:20%;}


	/**
	 *  - .single 	**/
	article .single-title	{ position:relative; margin:0 8% 10px; padding:0.5em 1em;}
	article .single-title:before	{ position:absolute; bottom:0; left:-10px; content:''; width:10px; height:100%; background-color:#A1DDF6;}
	article .single-title:after		{ position:absolute; bottom:-10px; left:-10px; content:''; width:0; height:0; border:solid transparent; border-width:5px; border-top-color:#38C1F8; border-right-color:#38C1F8;}
	article .post-thumbnail		{ margin:0 8% 3rem;}
	article .single-content .content	{ max-width:900px;}


}



/* 1280px =<                            */
@media screen and (min-width: 1280px) {

	body	{ padding:10px;}
	#headerwrap .ktf a	{ padding:14px 28px; font-size:1.6rem;}
	.site-header:after { top:50vh; left:4px; width:60px; height:350px; background-size:60px;}

	.section-title	{ margin:0 0 1.5em; padding:72px 8% 0; font-size:3.4rem;}
	.section-title:before	{ left:8%; width:72px; height:70px; background-size:72px auto;}

	.kankou-kiso	{ padding:6rem 0 0;}
	.kankou-kiso .kankou-list h4	{ font-size:1.7rem;}
	.kankou-kiso .kankou-list p		{ font-size:1.4rem;}
	.kankou-dx	{ padding:6rem 0 0;}
	.kankou-dx .kankou-list h4		{ font-size:1.7rem;}
	.kankou-dx .kankou-list p		{ font-size:1.4rem;}

}




/* 1440px =<                            */
@media screen and (min-width: 1440px) {

	body	{ padding:15px;}
	.home #branding .site-title	{ padding:80px 0 0;}
	.home #branding .site-title a	{ 
		width:400px; height:600px;
		background:url(../img/common/branding-home-l.png) no-repeat center top / 399px auto;
	}
	.site-header:after { top:50vh; left:4px; width:86px; height:500px; background-size:86px;}

}