/*
Theme Name: tokaiopt2019-custom
Theme URI: /wp-content/themes/tokaiopt2019/
Author: Yuichiro Hayashi/arata
Author URI:https://16deza.com/
Description: Responsive, Breez
Version: 1.0.0
Date: 2019-03-11
License: 
License URI: 
*/

@charset "utf-8";

/*
__Based on:
	WordPress theme -- tokaiopt2018 / Version: 1.1.1
	WP site -- www.tokaiopt.jp/advice/ @ 2018-03-27
*/


/* =============================================================================
   Site Styles
   ========================================================================== */

body {
	font-family: Verdana, Helvetica, "メイリオ", Meiryo, 
				"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", 
				"ＭＳ Ｐゴシック", sans-serif,
				"Takao Pゴシック", "TakaoPGothic", sans;
	line-height:1.9em;
	font-size:15px;
	padding-top: 0px;
	color:#444;

	
	text-align:center;
}

/* box-sizing */
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.container {max-width:1170px;}

p {margin:1.5em auto; text-align:left;}
p.slim {margin:0.75em auto;} 
p.wide {margin:2.25em auto;} 


hr {
	clear:both;
	border: 0 !important; height: 0 !important;
    border-top: 1px solid rgba(0, 0, 0, 0.15) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35) !important;
}

img {width:auto; max-width:100%; vertical-align:middle;}

	
#main { height: 100%; text-align:left;}

.hr-box {width:100%; margin: 0;}
.hr-box-pd20 {width:100%; margin: 0; padding-top:20px; padding-bottom:20px;}
.hr-box-pd30 {width:100%; margin: 0; padding-top:30px; padding-bottom:30px;}
.hr-box-pd40 {width:100%; margin: 0; padding-top:40px; padding-bottom:40px;}
.hr-box-pd50 {width:100%; margin: 0; padding-top:50px; padding-bottom:50px;}
.hr-box-pd60 {width:100%; margin: 0; padding-top:60px; padding-bottom:60px;}
.hr-box-pd70 {width:100%; margin: 0; padding-top:70px; padding-bottom:70px;}
.hr-box-pd80 {width:100%; margin: 0; padding-top:80px; padding-bottom:80px;}
.hr-box-pdt10 {width:100%; margin: 0; padding-top:10px;}
.hr-box-pd0 {width:100%; margin: 0; padding:0;}

h1 { color:#0066B1; font-size:2em; font-weight:bold; text-align:center; margin:1.1em auto; line-height:1em;}

h2 { 
	line-height:2.0em;
	vertical-align: baseline;
    margin: 0;
	padding-top: 0.35em;
	padding-bottom: 0.25em;	
	font-weight:normal;
	line-height:1.5em; font-size:180%;
	color:#4b4b4b;
}

h2.tac {padding-left:0; padding-right:0; text-align:center;}

#fixed-page-desc h2 {margin-bottom:1em;}

h3 { 
	color:#4b4b4b; line-height:1.5em; font-size:26px; font-weight:normal;
	margin-top:1em; padding:0.1em 0.5em; 
}

h4, h5, h6 { color:#666;}

a { color:#3385c2; text-decoration: none; }
a:hover {color:salmon; text-decoration: none; transition: 0.22s linear all;}

blockquote {
	font-style:italic; 
	background:rgba(0,0,0,0.075);
	padding:40px 20px;
	border-radius:0 30px 0 30px;
	position: relative;
}
blockquote:before {
    color: #fff;
    content: "“";
    font-family: serif;
    font-size: 500%;
    line-height: 1em;
    position: absolute;
    left:-4px; top: 0;
}
blockquote:after {
    color: #fff;
    content: "”";
    font-family: serif;
    font-size: 500%;
    line-height: 0;
    position: absolute;
    right: 10px; bottom:0;
}

button {cursor:pointer;}

dt,dd {margin:0; padding:0.5em;}

hr {clear:both; height:1px; border: 1px solid #aaa; margin: 12px 8px;}

table {
	clear:both;
	text-align:left;
	margin:16px 0px; 
	word-break:normal;
	box-sizing:border-box;
	width:99%;
}

th,td {
	padding:0.5em 1em;
	font-weight:normal;
	line-height:1.8em;
	text-align:left;
	word-break:normal;
	box-sizing:border-box;
}
th { border-bottom:1px solid #ddd;}
td { border-bottom:1px solid #ddd;}

ul {padding-left: 1.5em;}

ul,ol  { text-align: left;}

li {list-style:none; line-height:1.5em; margin:0.75em 0.5em;}

ul li.sq {list-style: square;}
ul li.sm {list-style: circle;}
ul li.km {list-style: disc;}

ol {font-weight:norm;}

ol li {
	list-style-type: decimal;
	margin-left:0.5em;
	margin-right:0.5em;
	font-size:15px;
}


/* **************************************************** 
	header
*/ 
header {position:relative;float:left; 
	top:0; left:0; width:100%;
	border:none;	height:auto;
	background:#fff;
	z-index:100;
}



/*navトップ固定用*/
#sticker {
	margin:0;
	padding:0 0 0.5em; 
	transition:all .3s linear 0s;
	background:#fff;
}
#sticker.fixed {
    position:fixed; top:0; left:0; width:100%;
	padding:0;
	z-index: 10000;
	/*opacity:0.95;*/
}
.colored {
	box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.5);
	transition:all .3s linear 0s;
	/*z-index:2;*/
}
#sticker h1 {margin:0;}


/* **************************************************** 
	navigation
*/ 

.pointer {cursor:pointer}

#gblnavi ul { padding:0; margin:0;}

#gblnavi .wrapper {max-width:1200px; margin:auto; overflow:visible;}
#gblnavi .black-belt {
	font-size:11px; color:#fff; font-weight:bold; 
	background:#000; line-height:1; margin:0; padding:4px; text-align:left;
}

#gblnavi { height:82px; padding:0;}
#gblnavi a {color:#444;}
#gblnavi a:hover {color:#0080cb;}
#gblnavi .navi-left {float:left; text-align:left; padding:0;}
#gblnavi .navi-left li {width:auto; display:inline-block; vertical-align:middle;}
#gblnavi .navi-left li:first-child {width:auto; min-width:250px;}
#gblnavi .navi-left li:nth-child(2) {width:auto; min-width:80px; text-align:left;}
#gblnavi .navi-left li .goog-te-gadget-simple {margin-top:0.25em; position:relative; width:158px; height:30px !important;}
#gblnavi .navi-left li .goog-te-menu-value {position:absolute; top:0.3em; left:12px;}
#gblnavi .navi-left button {border-radius:100%; height:2em; width:2em; background:#eee; color:#333; font-weight:normal; border:none; margin:0 0.35em; padding:0;}

#gblnavi .logo-mark {max-width:226px; margin:10px 6px 4px 20px;}
#gblnavi .logo-aside {display:inline-block; color:#888; padding:0.5em 0.5em; margin:1.75em 0 0; font-size:70%; line-height:1; vertical-align:middle; border:1px solid #888; border-radius:3px;}
#gblnavi .navi-right {display:table; height:82px; float:right; margin:0; padding:0; font-weight:bold; text-align:right;}
#gblnavi .navi-right li {display:table-cell; position:relative; margin:0 2px; padding:0em 0.75em; vertical-align:middle; text-align:center; border-left:0.25em solid #fff;}
#gblnavi .navi-right li a {
	display:inline-block; white-space:nowrap;
}
#gblnavi .navi-right li.with-icon {background:#f3f3f3; width:80px; padding:0 2px; font-size:12px; color:#0080cb; text-align:center; transition:all 0.33s linear 0s;}
.is-pc #gblnavi .navi-right li.with-icon:hover {opacity:0.7; transition:all 0.22s linear 0s;}
#gblnavi .navi-right li.with-icon img {width:24px; margin:auto; margin:auto;}
#gblnavi .navi-right li.with-icon span {display:inline-block; margin:0.5em auto 0;}
#gblnavi .navi-right li.burger {background:#0080cb; width:80px; transition:all 0.33s linear 0s;}
#gblnavi .navi-right li.burger:hover {opacity:0.85; transition:all 0.22s linear 0s;}

.is-pc #gblnavi .navi-right li.burger {display:none;}
.is-pc #sticker.fixed .navi-right li.burger {display:table-cell;}
.is-pc #sticker.fixed .navi-right li.for-pc {display:none;}
.is-pc #sticker .navi-right li.burger.displayed {display:table-cell !important;}

@media only screen and (min-width: 599px) {
	.is-mobile #gblnavi { height:101px; padding:0;}
}

@media only screen and (max-width: 599px) {
	#gblnavi { height:69px;/*60px;*/ padding:0;}
	#gblnavi .for-pc {display:none;}
	#gblnavi .navi-left li:first-child {width:auto; min-width:auto;}
	#gblnavi h1 {display:inline-block;}
	#gblnavi .logo-mark {/*width:45vw; max-*/width:150px; margin:6px 0px 0px 0px;}
	#gblnavi .navi-right {height:50px;}
	#gblnavi .navi-right li.with-icon {background:#f3f3f3; width:50px; height:50px; padding:0 2px; font-size:12px; color:#0080cb; text-align:center;}
	#gblnavi .navi-right li.with-icon img {width:24px; margin:auto; margin:auto;}
	#gblnavi .navi-right li.with-icon span {display:inline-block; margin:0.5em auto 0;}
	#gblnavi .navi-right li.burger {background:#0080cb; width:50px; height:50px;}
}

.menu-overlay,
.menu-underlay {
	position:fixed; top:0, left:0; width:100vw; height:100vh;
	/*transform:scale(0.3);  transform-origin:100% 0%;*/
	transition:all 0.5s linear 0s; opacity:0; z-index:-1;
		/*IE 8,9=>*/ width:100%\9; height:100%\9; display:none\9;
}
.menu-overlay h2 {font-family: 'Roboto', sans-serif; font-style:italic; font-weight:500; color:rgba(255,255,255,0.6);}
.is-pc .menu-overlay h2 {display:inline-block; font-size:350%;}
.is-mobile .menu-overlay h2 {display:block; font-size:225%; text-align:left;}
.menu-overlay h2 + span {font-style:italic; font-weight:600; color:rgba(255,255,255,0.6); }
.is-pc .menu-overlay h2 + span {display:inline-block; font-size:125%; margin-left:1em;}
.is-mobile .menu-overlay h2 + span {display:block; font-size:85%; line-height:1; text-align:left; margin-bottom:1.5em;}

.menu-overlay ul {padding-left:0 !important;}
.menu-overlay ul li {margin-left:0;}
.is-pc .menu-overlay ul li a:hover {text-decoration:underline;}

.reveal {
	transform:scale(1);
	transition:all 0.28s linear 0s; opacity:1; z-index:99900;
		/*IE 8,9=>*/ display:block\9;
}


#related-menu, #global-menu {background:#f3f3f3;}
#burger-menu {background:#0080cb; padding:6.5vh 0 0; color:#fff;}
#burger-menu a {color:#fff;}
#burger-menu ul li.parent {font-weight:900; font-size:110%;}
.is-pc #burger-menu .menu-closer {
	position:fixed; right:3em; top:1em; width:50px; height:50px;
	background:url(./img/icon/close-white.svg);
	background:url(./img/icon/close-white.png)\9;
	background-repeat:no-repeat; background-position:0 0;
	background-size:50px 50px;
}
.is-mobile #burger-menu .menu-closer {
	position:fixed; right:0.5em; top:.5em; width:30px; height:30px;
	background:url(./img/icon/close-white.svg);
	background-repeat:no-repeat; background-position:0 0;
	background-size:30px 30px;
}

.is-mobile #burger-menu .elementary {width:80%; max-width:270px; margin:auto;}
.is-mobile #burger-menu .elementary ul {margin-top:2.5em;}

.is-pc #related-menu .menu-closer, .is-pc #global-menu .menu-closer {
	position:fixed; right:3em; top:1em; width:50px; height:50px;
	background:url(./img/icon/close-blue.svg);
	background:url(./img/icon/close-blue.png)\9;
	background-repeat:no-repeat; background-position:0 0;	
	background-size:50px 50px;
}
.is-mobile #related-menu .menu-closer, .is-mobile #global-menu .menu-closer {
	position:fixed; right:0.5em; top:0.5em; width:30px; height:30px;
	background:url(./img/icon/close-blue.svg);
	background-repeat:no-repeat; background-position:0 0;	
	background-size:30px 30px;
}
.is-mobile #related-menu .container {margin-top:0; padding:15vh 0 0 15vw;}
#related-menu h2 {color:#6c6c6c;}
#related-menu h2 + span {display:inline-block; color:#6c6c6c;}
#related-menu .container {max-width:550px; margin-top:20vh; margin-top:300px\9;} 
#related-menu ul li.parent {font-weight:900; font-size:110%;}

#select-language,
#to-global-site {width:50%; height:100%; float:left; text-align:center;}
#to-global-site {background:#e8e8e8;}
#select-language h2 {color:#8e8e8e; margin-top:35vh; margin-top:450px\9;}
#to-global-site h2 {margin-top:38.5vh; margin-top:450px\9;}
.is-pc #to-global-site a:hover {text-decoration:underline;}
.ml2gbl {padding-top:17.5vh;}
.ml2gbl h2 {text-align:center !important; margin-top:1.5em; color:#7f7f7f;}

@media only screen and (min-width: 801px) and (max-width: 995px) {


}

@media only screen and (max-width: 800px) {
	#select-language,
	#to-global-site {width:100vw !important; height:auto !important; text-align:center; background:#f3f3f3;}
	#select-language h2 {color:#8e8e8e; margin-top:25vh; margin-top:200px\9;}
	#to-global-site h2 {margin-top:10vh; margin-top:200px\9;}
}

@media only screen and (min-width: 801px) {
	/*
	#gblnavi-pc { display:block;}
	#gblnavi-mobile {display:none;}
	*/
	div.navigation a:hover {text-decoration:underline;}
}

@media only screen and (max-width: 800px) {
	/*
	#gblnavi-pc { display:none;}
	#gblnavi-mobile {display:block;}
	*/
}


@media only screen and (max-width:479px) { 

}



.mobile-menu-main a {color:#fff; font-weight:bold;}
.mobile-menu-main .eol {padding:1.5em inherit; font-size:0.8em;}
.mobile-menu-main .eol span {margin:0.5em 0;}
.mobile-menu-main .eol button {border-radius:100%; padding:0; height:2em; width:2em; background:#eee; color:#333; font-weight:normal; border:1px solid #fff; margin:0.25em 0 0.25em 1em; font-size:0.9em;}
.mobile-menu-main .eol button.current-fontsize {background:#3385c1; color:#fff; font-weight:bold;}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
	パンくず
*/
#upper-pnkz {margin:1em 0 0; font-size:0.8em; text-align:left;}



/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
	Pagenation
*/
.pagination {
	clear:both;
	position:relative;
	margin:2em 0.5em 2em;
	text-align:center;
}
 
.pagination span.current, .pagination a  {
	display: inline-block;
	text-align:center;
	width:2.5em;
	height:2.5em;
	font-size:1em;
	padding-top:0.25em;
	padding-bottom:0.55em;
	margin:0.44em;
}
 
.pagination a {background:#fff; color:#3385c1; border:1px solid #3385c1; transition:all 0.14s linear 0s;}
.pagination a:hover { transform: scale(1.133); transition: all 0.1s linear 0s;}


.pagination .current{
	background:#3385c1;
	color:#fff;
}

.pagination span.dot {
	color:#3385c1;
	display: inline-block;
	text-align:center;
	width:20px;
	height:2.5em;
	font-size:1.5em;
	padding-top:0.5em;
	padding-bottom:0.45em;
	margin:0.3em;
}



/* ************************************************
	FOOTER
*/

#footer-pnkz {background:#f3f3f3; text-align:left; padding:1em 0;}

footer { 
	
	clear:both; position:relative; left:0; right:0; bottom:0;
	padding:10px; text-align:center;	font-size:14px;
	min-height:150px; color:#444; height:auto; min-height:250px;
	background:#fff; border-top:1px solid #444;;
}


footer a {color:#222;}
footer a:hover {color:#999; transition:all 0.3s linear 0s;}

#footer-inner { width:96%; max-width:10000px; margin:0 auto;}
#footer-navi {clear:both; margin-top:20px; margin-bottom:20px;}
#copyright {font-size:10px; line-height:1.5;}

footer ul {padding:0; text-align:center;}
footer ul li {
    display: inline-block; height: 24px; vertical-align:top;
	font-size:12px; text-align:left;
    margin:12px 32px 12px 0;
}

#rewind {
	display: none; position: fixed;	bottom: 10px; right: 10px; font-size:250%; text-align:center;
    background: rgba(0,0,0,0.5); color: #FFFFFF; cursor: pointer; transform:rotate(-90deg) scale(0.8);
	line-height:1em; padding:0.25em 0.5em 0.35em;
	z-index:25252;
}


/* ************************************************
	etc
*/

.inline {display:inline-block;}

.bg-white {background:#fff;}
.bg-owhite {background:#f3f3f3;}
.bg-lgray {background:#eee;}

.toggler {cursor:pointer;}

/* =============================================================================
   Post Styles
   ========================================================================== */

#home-body h2 { 
	font-family: Verdana, Helvetica, "メイリオ", Meiryo, 
				"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", 
				"ＭＳ Ｐゴシック", sans-serif,
				"Takao Pゴシック", "TakaoPGothic", sans;
	color:#444;
}

.single-post h2 {background:#007FDC; color:#fff; padding-left:0.5em; margin-top:0.5em;}

/* #single-body div.post-body {border-bottom:1px solid #ccc;} */
#single-body div.post-body {}
body#fixed-page div.post-body {padding:0em 16px;}
#home-body div.post-body { background:#fff; }

div.post-body img {margin:8px 8px 8px 0; padding:0; width:auto; max-width:100%; height:auto !important;}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
div.post-body img[src$=".svg"] {
    width: 100%; 
  }
}

div.post-body blockquote {	padding:40px 20px;}

div.post-meta { margin:1.5em 0; padding:0; text-align:right; }
div.post-meta span.post-date { font-size:1em; }


input#searchsubmit { padding:6px 12px;}

input::-webkit-input-placeholder { color: #ddd !important; }
input:-moz-placeholder { color: #ddd !important; opacity: 1; }
input::-ms-input-placeholder { color: #ddd !important; }




/* =============================================================================
   Media Queries
   ========================================================================== */

/* PC display 996px */
@media only screen and (min-width: 996px) {
	
	.smponly, .tblonly, .smptbl {display:none;}

}

/* Tablet Portrait size to Base 996px */
@media only screen and (min-width: 768px) and (max-width: 995px) {

	.smponly, .smptbl, .maxonly  {display:none;}
	
}

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

	#upper-pnkz {padding:0 1em;}

}

/* All Mobile Sizes */
@media only screen and (max-width: 767px) {

	.maxonly, .pconly, .smponly, .tblonly {display:none;}
	.smptbl {display:block;}

	table {font-size:0.95rem;}
	th, td { padding:4px 8px; }

	.flex-table:before, .flex-table:after { content: " "; display: table;}
	.flex-table:after { clear: both;}
	.flex-table { *zoom: 1;}
	.flex-table th, .flex-table td {float:left; width:100% !important;}
	.flex-table th {border-bottom:none;}
	.flex-table tr:first-child {border-top:1px solid #ddd;}

}

/* Mobile Landscape Size to Tablet Portrait */
@media only screen and (min-width: 480px) and (max-width: 767px) {

	.pconly {display:none;}
	.tblonly {display:block;}
	
	h3 {line-height:2.0em; font-size:1.5em;}

}

/* Mobile Portrait Size to Mobile Landscape Size */
@media only screen and (max-width: 479px) {
	
	body { font-size:0.95rem; }

	.pconly, .tblonly, .tblpc {display:none;}
	.smponly {display:block;}
	
	h1 {font-size:1.7em;}
	h2 {line-height:1.25em; font-size:1.65em;}
	h3 {font-size:1.4em;}

	table { margin:8px 2px; width:98%;}

	.flex-table-smp:before, .flex-table-smp:after { content: " "; display: table;}
	.flex-table-smp:after { clear: both;}
	.flex-table-smp { *zoom: 1;}
	.flex-table-smp th, table.flex-table-smp td {float:left;}

	ul, ol  { padding-left:1.5em;}
	ul.nopad, ol.nopad  { padding-left:0; margin-left:-1em; font-size:13px;}
	
	#rewind {	padding: 2px 6px 8px; right:2px; bottom:2px;}

	footer ul {padding:0;}
	footer ul li {display:inline-block; width:45%; margin-right: 1%;margin-left: 1%; text-align: center;}
	
	div.post-body, body#fixed-page div.post-body {padding:1.5em 4px;}
	div.post-meta span.row { display:block; margin:0;}
	div.post-body th {width:auto; min-width:10%;}


}


/* +++ PRINT SETTING +++ */
@media print{

	#gblnavi-mobile, .smponly, .tblonly, .smptbl {display:none;}

}



/* =============================================================================
   Font-Face
   ========================================================================== */
/* This is the proper syntax for an @font-face file*/

.sosaicon { font-family: 'SosaIcon'; }


@font-face {
    font-family: 'SosaIcon';
    src: url('./fonts/SosaIcon.woff') format('woff'),
		url('./fonts/SosaIcon.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* ====== img change ===== */
@media only screen and (min-width: 1169px) {
	.topimgchange1{
		display:block;
	}
	.topimgchange2{
		display:none;
	}
	.topwakuchange{
		max-width:100%;
	}
}
@media only screen and (max-width: 1169px) {
	.topimgchange1{
		display:none;
	}
	.topimgchange2{
		display:block;
	}
	.topwakuchange{
		max-width:570px;
	}

}