@charset "utf-8";
/* CSS Document */

/************************************************************************************
* paddingとborderを幅と高さに含める
*************************************************************************************/
* {
	-webkit-box-sizing:border-box;   /* for SP>3 */
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
	box-sizing:border-box;
}
*:before, *:after {
	-webkit-box-sizing: border-box;   /* for SP>3 */
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
	box-sizing: border-box;
}

/************************************************************************************
HTML,BODY
*************************************************************************************/
html {
	scroll-behavior:smooth;
}
html,body {
	width:100%;
	height:100%;
	min-height:100%;   /* html fit brows */
}
body {
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
	text-size-adjust:100%;
	font-family:'Noto Sans JP','メイリオ','Meiryo','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック','sans-serif';
	color:rgba(59,59,59,1);
	font-size:14px;
	line-height:150%;
	text-align:center;
	overflow-x: hidden;
	background-image:url(../images/common/eye_bg.png);
	background-position:-20px 0;
	background-size:cover;
	background-attachment:fixed;
	background-repeat:no-repeat;
}
@media only screen and (max-width: 1269px){
	body {
		background-image:url(../images/common/eye_bg_sp.png);
		background-size:110vw;
		background-position:top center;
		background-repeat:repeat-y;
	}
}

/************************************************************************************
CLEARFIX
*************************************************************************************/
.clearfix:after {
	content:".";
	display:block;
	height:0;
	clear: both;
	visibility:hidden;
}
.clearfix {/* for IE<8 */
	zoom:1;
}

/************************************************************************************
FLOAT
*************************************************************************************/
.floatleft {
	float:left;
}
.floatright {
	float:right;
}
.floatnone {
	float:none;
}

/************************************************************************************
LINK
*************************************************************************************/
a {
	white-space:nowrap;
	transition: all 0.4s;
}
a:link {
	color:rgba(59,59,59,1);
	text-decoration:none;
	outline: none;
}
a:visited {
	color:inherit;
	text-decoration:none;
}
a:hover {
	color:rgba(149,187,192,1);
	text-decoration: none;
}
a:active, a:focus{
	outline:none;
}
.alphaover a:hover img {
	opacity:0.5;
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-webkit-transition-duration:1s;
	-moz-transition-duration:1s;
	-o-transition-duration:1s;
	-ms-transition-duration:1s;
	transition-duration:1s;
}
.none{
	opacity:0.4;
	filter:alpha(opacity=40);
	-moz-opacity:0.4;
}
a.ghostButton {
	width:90%;
	color:rgba(255,255,255,1) !important;
	text-align:center;
	line-height:30px;
	font-family:'Noto Sans JP','メイリオ','Meiryo','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック','sans-serif';
	padding:10px 30px;
	margin:24px auto 0;
	background-color:rgba(154,154,154,1);
	border:2px rgba(154,154,154,1) solid;
	border-radius:8px;
	box-shadow:0px 0px 6px 1px rgba(0,0,0,0.1);
	cursor:pointer;
	transition: all 0.4s;
	display:block;
	opacity:1.0;
	filter:alpha(opacity=100);
	-moz-opacity:1.0;
	text-decoration:none !important;
	font-size: calc(0.10vw + 1.0rem) !important;
	white-space:normal;
}
a.ghostButton:hover {
	opacity:0.7;
	filter:alpha(opacity=70);
	-moz-opacity:0.7;
}
@media only screen and (max-width: 650px){
	a.ghostButton {
		width:80%;
	}
}

/************************************************************************************
TEXT
*************************************************************************************/
h1 {
    font-size:px;
	line-height:;
}
h2 {
    font-size:px;
	line-height:;
}
h3 {
    font-size:px;
	line-height:;
}
h4 {
    font-size:px;
	line-height:;
}
h5 {
    font-size:px;
	line-height:;
}
h6 {
    font-size:px;
	line-height:;
}
.white {
	color:rgba(255,255,255,1);
}
.black {
	color:rgba(0,0,0,1);
}
.gray1 {
	color:rgba(242,242,242,1);
}
.bg_gray1 {
	background-color:rgba(242,242,242,1);	
}
.bg_gray1_border {
	background: linear-gradient(transparent 70%, rgba(242,242,242,0.6) 70%);
}
.gray2 {
	color:rgba(154,154,154,1);
}
.bg_gray2 {
	background-color:rgba(154,154,154,1);	
}
.bg_gray2_border {
	background: linear-gradient(transparent 70%, rgba(154,154,154,0.6) 70%);
}
.red {
	color:rgba(253,115,97,1);
}
.bg_red {
	background-color:rgba(253,115,97,1);	
}
.bg_red_border {
	background: linear-gradient(transparent 70%, rgba(253,115,97,0.6) 70%);
}
.blue {
	color:rgba(149,187,192,1);
}
.bg_blue {
	background-color:rgba(149,187,192,1);
}
.bg_blue_border {
	background: linear-gradient(transparent 70%, rgba(149,187,192,0.6) 70%);
}
.yellow {
	color:rgba(248,192,79,1);
}
.bg_yellow {
	background-color:rgba(248,192,79,1);	
}
.bg_yellow_border {
	background: linear-gradient(transparent 70%, rgba(248,192,79,0.6) 70%);
}
.green {
	color:rgba(136,185,156,1);
}
.bg_green {
	background-color:rgba(136,185,156,1);	
}
.bg_green_border {
	background: linear-gradient(transparent 70%, rgba(136,185,156,0.6) 70%);
}
.beige {
	color:rgba(255,236,204,1);
}
.bg_beige {
	background-color:rgba(255,236,204,1);	
}
.bg_beige_border {
	background: linear-gradient(transparent 70%, rgba(255,236,204,0.6) 70%);
}
.bold {
	font-weight:bold;
}
pre a {
	text-decoration:none;
}
.supplementation {
	font-size:14px;
}
.tit {
	font-size: calc(0.25vw + 1.3rem);
	font-weight:bold;
	line-height:300%;
	margin-bottom:50px;
	
	display:block;
	position:relative;
}

.tit::before {
	content:'';
	width:0;
	border-bottom:solid 30px rgba(230,230,230,0.9);
	transform: translateX(-50%); /*左からならいらん*/
	animation:border_anim 0.5s linear forwards;
	position:absolute;
	/*left:0;*/
	left:50%;
	bottom:0;
	z-index:-1;
	
}
.border_anim {
	-webkit-animation-name:border_anim;
	animation-name:border_anim;
}


.tit01 {
	color:rgba(255,255,255,1);
	font-size: calc(0.14vw + 1.2rem);
	font-weight:bold;
	letter-spacing:0.1em;
	line-height:180%;
	background-color:rgba(149,187,192,1);
	padding:10px 20px;
	margin-bottom:30px;
}
.tit02 {
	font-size: calc(0.13vw + 1.2rem);
	font-weight:bold;
	letter-spacing:0.1em;
	line-height:180%;
	border-top:2px solid rgba(100,100,100,1);
	border-bottom:2px solid rgba(100,100,100,1);
	padding:10px 20px;
	margin-bottom:25px;
}
.tit03 {
	font-size: calc(0.13vw + 1.2rem);
	font-weight:bold;
	letter-spacing:0.1em;
	line-height:140%;
	border-left:7px solid rgba(175,175,175,1);
	padding:10px 20px;
	margin-bottom:25px;
}



.korWords {
	font-size: calc(0.15vw + 1.2rem) !important;
	letter-spacing:0.15em;
	line-height:160%;
	border:3px solid rgba(253,115,97,1);
	background-color:rgba(255,255,255,0.8);
	padding:15px 15px 10px;
	margin-bottom:20px;
}
.jpnWords {
	font-size: calc(0.13vw + 1.2rem);
	letter-spacing:0.15em;
	line-height:160%;
	border:3px solid rgba(136,185,156,1);
	background-color:rgba(255,255,255,0.8);
	padding:10px 15px;
	margin-bottom:20px;
}
.cautionWords {
	/*color:rgba(255,255,255,1);*/
	font-size: calc(0.08vw + 0.9rem) !important;
	letter-spacing:0.1em;
	line-height:180%;
	/*background-color:rgba(253,115,97,1);*/
	/*background-color:rgba(154,154,154,1.0);*/
	background: #f5f5f5;
	background-image:url(../images/common/icon02_w.png);
	background-size:25px;
	background-position:left 15px top 21px;
	background-repeat:no-repeat;
	padding:20px 10px 20px 48px;
	margin-bottom:20px;
	position:relative;
}
.cautionWords:after, .cautionWords:before {
	bottom: 15px;
	box-shadow: 0 15px 10px #777;
	content: "";
	left: 10px;
	max-width: 300px;
	position: absolute;
	top: 80%;
	transform: rotate(-3deg);
	width: 50%;
	z-index: -1;
}
.cautionWords:after {
	left: auto;
	right: 10px;
	transform: rotate(3deg);
}


ruby {
	ruby-align: space-around;
}
rt {
	color:rgba(253,115,97,1);
	font-size:12px;
	font-weight:600;
	letter-spacing:-0.025em;
	padding-top:5px;
	
}
.entry-content p {
	font-size: calc(0.09vw + 1.0rem);
	line-height:160%;
	letter-spacing:0.1em;
	margin:20px 0;
}
figure img {
	width:100%;
	height:auto;
}
.batchim {
	font-size: calc(0.08vw + 0.85rem) !important;
}

/********DROPDOWN********/
.revise {
	border-top:#B4B2B2 1px solid;
	margin-bottom:50px;
}
.toggle {
	display: none;
}
.Label {
	/*width:100%;*/
	height:auto;
	color:#343434;
	font-size: calc(0.12vw + 1.1rem);
	font-weight:600;
	line-height:160%;
	letter-spacing:0.1em;
	text-align:left;
	/*border-top:#B4B2B2 1px solid;*/
	border-left:#B4B2B2 1px solid;
	border-right:#B4B2B2 1px solid;
	border-bottom:#B4B2B2 1px solid;
	background:rgba(255,255,255,0.9);
	padding:10px 40px 15px 20px;
	display:block;	
	cursor:pointer !important;
}
.Label:first-child {
	border-top:#B4B2B2 1px solid !important;
}
.Label:hover {
	opacity:0.7;
	filter:alpha(opacity=70);
	-moz-opacity:0.7;
	-webkit-transition-duration:1s;
	-moz-transition-duration:1s;
	-o-transition-duration:1s;
	-ms-transition-duration:1s;
	transition-duration:1s;
}
.Label:before, .Label:after {
	content: "";
	width: 2px;
	height: 12px;
	background: #343434;
	position: absolute;
	top: 50%;
	right:25px;
}
.Label:before {
	transform:translate(-50%,-50%) rotate(0deg);
	transition:all 0.4s;
}
.Label:after {
	transform:translate(-50%,-50%) rotate(-90deg);
	transition:all 0.4s;
}
.Label, .content {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform:translateZ(0);
	transition:all 0.4s;
}
.content {
	/*width:100%;*/
	height:0;
	background:rgba(255,255,255,0.9);
	font-size: calc(0.09vw + 1.0rem);
	letter-spacing:0.05em;
	line-height:180%;
	text-align:left;
	overflow:hidden;
}
.toggle:checked + .Label {
	background: rgba(245,245,245,0.9);
	border:rgba(253, 115, 97, 1) 2px solid;
	transition:all 0.2s;
}
.toggle:checked + .Label + .content {
	height:auto;
	padding:20px 20px 20px 0;
	border-left:#B4B2B2 1px solid;
	border-right:#B4B2B2 1px solid;
	border-bottom:#B4B2B2 1px solid;
	box-shadow:0px 0px 6px 1px rgba(0,0,0,0.1);
	transition:all 0.4s;
}
.toggle:checked + .Label:before {
	transform:translate(-50%,-50%) rotate(45deg);
	transition:all 0.25s;
}
.toggle:checked + .Label:after {
	transform:translate(-50%,-50%) rotate(-45deg);
	transition:all 0.25s;
}

div.content ul li {
	display: inline-block;
	margin-left:20px;
	/*margin-bottom:15px !important;*/
}
#shuffleButton {
	width:96.5% !important;
	font-size: calc(0.11vw + 1.0rem) !important;
	background-color:rgba(136,185,156,1) !important;
	display:block !important;
	padding:10px !important;
	margin-bottom:30px !important;
}
/* 新しく追加されたボタンのスタイル */
#resetButton {
    width: 96.5% !important;
    font-size: calc(0.11vw + 1.0rem) !important;
    background-color: rgba(200,200,200,1) !important; /* 少し控えめな色 */
    display: block !important;
    padding: 10px !important;
    margin-bottom: 30px !important; /* shuffleButtonと同じく下にスペース */
    margin-top: -20px !important; /* shuffleButtonのmargin-bottomと合わせて調整 */
}
@media only screen and (max-width: 1269px){
	form.revise {
		width:100%;
		margin:30 auto 30px;
	}
}
/*@media only screen and (max-width: 759px){
	rt {
		padding-top:0;
		
	}
}*/
@media only screen and (max-width: 759px){
	.korWords {
		padding:6px 15px 10px;
	}
	#shuffleButton {
		width:94% !important;
	}
	#resetButton {
		width:94% !important;
	}
}


@keyframes border_anim {
	0%{
		width:0%; /*width: 100%;*/
	}
	100%{
		width:100%; /*width: 200px;*/
	}
}
.pcNone {
	display:none;
}
.spNone {
	display:block;
}
@media only screen and (max-width: 1269px){
	.pcNone {
		display:block;
	}
	.spNone {
		display:none;
	}
}

div.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin-bottom: 30px;
}
div.video-container div.video iframe, #main div.video-container div.video object, #main div.video-container div.video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/************************************************************************************
MARGIN,PADDING
*************************************************************************************/
.mt70 {
	margin-top:70px !important;
}
.mb50 {
	margin-bottom:50px !important;
}

/************************************************************************************
INPUT,TEXTAREA
*************************************************************************************/
input[type="text"], input[type="password"], input[type="search"], input[type="email"] {
	-webkit-appearance: none;
	border-radius:0;
	padding-left:2px;
	box-shadow:0px 0px 6px 1px rgba(0,0,0,0.1);
	font-family:'Noto Sans JP','メイリオ','Meiryo','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック','sans-serif';
}
input[type="text"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="email"]:focus {
	outline:2px rgba(149,187,192,1) solid;
	box-shadow:none;
}
input[type="search"] {
	width:70% !important;
	padding:3px 1px 5px !important;
}
.widjet-area button {
	width:20% !important;
	padding:0px 10px !important;
	border-radius:0 !important;
}
textarea {
	padding-left:2px;
	box-shadow:0px 0px 6px 1px rgba(0,0,0,0.1);
	font-family:'Noto Sans JP','メイリオ','Meiryo','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック','sans-serif';
}
textarea:focus {
	outline:2px rgba(149,187,192,1) solid;
	box-shadow:0px 0px 6px 1px rgba(0,0,0,0.1);
}
input[type="text"], input[type="password"], input[type="search"], input[type="email"], isindex {
	-webkit-appearance: none;
	border-radius:0;
	padding:1px;
	background-color:rgba(255,255,255,1);
	border:1px solid rgba(204,204,204,1);
	border-image:initial;
	-webkit-rtl-ordering:logical;
	-webkit-user-select:text;
	cursor:auto;
}
input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button {
	-webkit-appearance: none;
	border-radius:0;
	border:none;
}
textarea {
	-webkit-appearance: none;
	border-radius:0;
	background-color:rgba(255,255,255,1);
	border:1px solid rgba(204,204,204,1);
	border-image:initial;
	-webkit-rtl-ordering:logical;
	-webkit-user-select:text;
	-webkit-box-orient:vertical;
	resize:auto;
	cursor:auto;
	padding:2px;
	white-space:pre-wrap;
	word-wrap:break-word;
}
@media only screen and (max-width: 759px){
	input[type="search"] {
		padding:1px 1px 5px !important;
	}
}

/************************************************************************************
BUTTON/SUBMIT/RESET
*************************************************************************************/
button, input[type="button"], input[type="submit"], input[type="reset"] {
	color:rgba(255,255,255,1);
	text-align:center;
	line-height:30px;
	font-family:'Noto Sans JP','メイリオ','Meiryo','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック','sans-serif';
	padding:4px 15px !important;
	background-color:rgba(149,187,192,1);
	border:none;
	border-radius:5px;
	box-shadow:0px 0px 6px 1px rgba(0,0,0,0.2);
	cursor:pointer;
	transition: all 0.3s;
}

button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover {
	opacity:0.8;
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
}
button:active, input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active {
	outline:none;
	box-shadow:0px 0px 6px 1px rgba(0,0,0,0.2) inset;
}
button:focus, input[type="button"]:active, input[type="submit"]:focus, input[type="reset"]:focus {
	border:none;
	outline:none;
	/*box-shadow:0px 0px 6px 1px rgba(0,0,0,0.2) inset;*/
}

/************************************************************************************
RADIO
*************************************************************************************/
input[type="radio"] {
	display:none;
}
input[type="radio"] + label.radio-label {
	padding-left:30px;
	height:25px; 
	display:inline-block;
	line-height:25px;
	background-repeat:no-repeat;
	background-position:0 0;
	vertical-align:middle;
	cursor:pointer;
	transition: all 0.3s;
	

}
input[type="radio"] + label.radio-label:hover {
	opacity:0.8;
	filter:alpha(opacity=80);
	-moz-opacity:0.8;	
}
input[type="radio"]:checked + label.radio-label {
	background-position:0 -25px;
}
label.radio-label {
	background-image:url(../images/common/radio_button.png);
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}

/************************************************************************************
CHECKBOX
*************************************************************************************/
input[type="checkbox"] {
	display:none;
}
input[type="checkbox"] + label.check-label {
	padding-left:30px;
	height:25px; 
	display:inline-block;
	line-height:25px;
	background-repeat:no-repeat;
	background-position:0 0;
	vertical-align:middle;
	cursor:pointer;
	transition: all 0.3s;
}
input[type="checkbox"] + label.check-label:hover {
	opacity:0.8;
	filter:alpha(opacity=80);
	-moz-opacity:0.8;	
}
input[type="checkbox"]:checked + label.check-label {
	background-position:0 -25px;
}
label.check-label {
	background-image:url(../images/common/check_box.png);
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	margin-right:10px;
}

/************************************************************************************
SELECT
*************************************************************************************/
select {
	font-family:'Noto Sans JP','メイリオ','Meiryo','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック','sans-serif';
	border:1px solid rgba(204,204,204,1);
	box-shadow:0px 0px 6px 1px rgba(0,0,0,0.1);
	/*margin-bottom:15px;*/
	cursor:pointer;
	transition: all 0.3s;
}
select:hover {
	border:#BBB solid 1px;
}
select:active {	
}
select:focus {
	box-shadow:none;
	border:1px #155698 solid;
	border-radius:2px;
	outline:1px #155698 solid;
}
option:hover {
	background-color:#155698;
}

/************************************************************************************
FLEXBOX
*************************************************************************************/
.flexbox {
	display:flex;
	justify-content:center;
	align-items:center;
}

/************************************************************************************
SECTION
*************************************************************************************/
.section960 {
	width:960px;
	margin:0 auto;
	text-align:left;
}
.section1270 {
	width:1270px;
	margin:0 auto;
	text-align:left;
}
@media only screen and (max-width: 1269px){
	.section960 {
		width:100%;
	}
	.section1270 {
		width:100%;
	}
}

/************************************************************************************
CONTAINER
*************************************************************************************/
#container {
	width:100%;
	height:auto;
	min-height:100%; /* html fit brows */
	margin:0 auto;
	/*overflow:hidden;*/
}

/************************************************************************************
BG
*************************************************************************************/
.bg {
	width:100%;
	height:auto;
	min-width:320px;
    z-index: 0;
    position:fixed;
}

/************************************************************************************
HEADER
*************************************************************************************/
#header {
	width:100%;
	min-width:1250px;
	height:auto;
	padding:0;
	background-color:rgba(255,255,255,1);
	box-shadow:0 2px 3px rgba(0,0,0,0.1);
	position:fixed;
	top:0;
	left:0;
	z-index:9999;
	margin:0 auto;
}
header#header div#hTop {
	height:36px;
	color:rgba(59,59,59,1);
	font-size:10px;
	line-height:36px;
	background-color:rgba(242,242,242,1);
	padding:0 10px;
	margin-bottom:5px !important;
}
header#header div#hTop h1 {
	margin-bottom:0 !important;
}
header#header div.section960 {
	margin-bottom:0 !important;
}
header#header div#hTop h1 {
	float:left;
}
header#header div#hTop div#telNumber {
	float:right;
}
#header div#logo {
	font-size:18px;
	line-height:140%;
	padding-top:10px;
	padding-left:10px;
	padding-bottom:15px;
	float:left;
}
#header div#logo a span:first-child {
	color:#1e81a8;
	font-weight:bold;
}
#header div#logo a span:last-child {
	font-size:16px;
	letter-spacing:11.5px;
	color:#666666;
	padding-left:10px !important;
}
#header div#logo a:hover {
	opacity:0.7;
	filter:alpha(opacity=70);
	-moz-opacity:0.7;
	-webkit-transition-duration:1s;
	-moz-transition-duration:1s;
	-o-transition-duration:1s;
	-ms-transition-duration:1s;
	transition-duration:1s;
}
#header nav {
	padding-top:20px;
	padding-right:10px;
	float:right;
}
#header nav ul {
}
#header nav ul li {
	font-size:16px;
	float:left;
}
#header nav ul li a {
	display:block;
	line-height:30px;
	float:left;
}
#header nav ul li+ li {
	padding-left:40px;
}
#header nav ul li a:hover {
	transition: all 0.5s;
}
#header nav ul li.current {
	color:#1e81a8 !important;
	font-weight:bold;
	
}
#header nav ul li.current a:link {
	color:#1e81a8 !important;
}
#header nav ul li.current a:hover {
	color:#1e81a8 !important;
}
#header nav ul li.current a:visited {
	color:#1e81a8 !important;
}
@media only screen and (min-width: 1270px){
	nav#spNav {
		display:none;
	}
}
@media only screen and (max-width: 1269px){
	header#header {
		width:100%;
		max-width:100%;
		min-width:100%;
		height:auto !important;
		position:fixed;
		z-index:9995 !important;
		overflow:inherit !important;
	}
	header#header div#hTop h1 {
		float:none;
	}
	header#header div#hTop div#telNumber {
		display:none;
	}
	#header div#logo {
		float:none;
	}
	/*  PCNAV  */
	nav#pcNav {
		display:none;
	}
	#header nav {
		padding-top:0;
		float:none;
	}
	#header nav ul li {
		float:none;
	}
	#header nav ul li a {
		float:none;
	}
	#header nav ul li+ li {
		padding-left:0;
	}
	#header nav ul li a.current {
		color:rgba(149,187,192,1);
		font-weight:bold;	
	}
	
	/*  SPNAV  */
	div#spNav {
		max-width:100%;
		display:inherit;
		overflow:hidden;
	}
	.menu-btn {
		width:30px;
		height:30px;
		display:flex;
		justify-content:center;
		align-items:center;
		position:fixed;
		top:3px;
		right:8px;
		z-index:9999;
		cursor:pointer;
	}
	.menu-btn:hover {
		opacity:0.5;
		filter:alpha(opacity=50);
		-moz-opacity:0.5;
		transition:all 0.7s;/*アニメーション設定*/
	}
	.menu-btn span,
	.menu-btn span:before,
	.menu-btn span:after {
		content:'';
		width:25px;
		height:3px;
		display:block;
		background-color:rgba(59,59,59,1);
		position:absolute;
	}
	.menu-btn span:before {
		bottom:8px;
	}
	.menu-btn span:after {
		top:8px;
	}
	#menu-btn-check:checked ~ .menu-btn span {
		background-color:rgba(59,59,59, 0);
	}
	#menu-btn-check:checked ~ .menu-btn span::before {
		bottom:0;
		transform:rotate(45deg);
	}
	#menu-btn-check:checked ~ .menu-btn span::after {
		top:0;
		transform:rotate(-45deg);
	}
	#menu-btn-check {
		display:none;
	}
	
	.menu-content {
		width:100%;
		height:100%;
		background-color: rgba(255,255,255,0.95);
		position:fixed;
		top:0;
		left:100%;
		z-index:9997;
		transition:all 0.5s;
		padding-bottom:55px;
		
		overflow:auto;
		-webkit-overflow-scrolling:touch;
	}
	#menu-btn-check:checked ~ .menu-content {
		left:0;
	}
	
	.menu-content ul li {
		display:block !important;
		margin-left:0 !important;
		margin-bottom:0 !important;
		padding:0 40px;
		border-bottom:#B4B2B2 1px solid;
	}
	#header nav ul li+ li {
		padding:0 40px;
	}
	.menu-content ul li a {
		width:100%;
		color:rgba(59,59,59,1);
		font-size:20px;
		line-height:60px !important;
		display:block;
		position: relative;
	}
	.menu-content ul li a:hover {
		color:rgba(149,187,192,1);
	}
	.menu-content ul li a::before {
		content:"";
		width:7px;
		height:7px;
		border-top:solid 2px rgba(52,52,52,1);
		border-right:solid 2px rgba(52,52,52,1);
		transform:rotate(45deg);
		position:absolute;
		right:11px;
		top:28px;
	}
	.menu-content span {
		color:rgba(255,255,255,1);
		font-size:10px;
		line-height:20px;
		background-color:#1e81a8;
		padding:1px 9px;
		margin-left:15px;
		display:inline-block;
	}
	
	/*  SPMAIL */
	div#spMail {
		width:50px;
		height:50px;
		cursor:pointer;
		display:block !important;
		position:fixed;
		top:-8px;
		right:0;
	}
	div#spMail a {
		width:50px;
		height:50px;
		display:block;
		background-image:url(../images/common/mail.png);
		background-size:40px;
		background-repeat:no-repeat;
		background-position:center;
		filter:alpha(opacity=100);
		-moz-opacity:1.0;
		opacity:1.0;
		display:block;
		-webkit-transition-duration:1s;
		-moz-transition-duration:1s;
		-o-transition-duration:1s;
		-ms-transition-duration:1s;
		transition-duration:1s;
	}
	div#spMail a:hover {
		filter: alpha(opacity=50);
		-moz-opacity:0.5;
		opacity:0.5;
		-webkit-transition-duration:1s;
		-moz-transition-duration:1s;
		-o-transition-duration:1s;
		-ms-transition-duration:1s;
		transition-duration:1s;
	}
}

/* 画面内に出てくる */
.appear {
	animation:appear 0.8s forwards;
}
@keyframes appear {
	from {
		transform:translateY(-100%);
	}
	to {
		transform:translateY(0%);
	}
}

/* 画面外に消える */
.disappear {
	animation:disappear 0.8s forwards;
}
@keyframes disappear {
	from {
		transform:translateY(0%);
	}
	to {
		transform:translateY(-100%);
	}
}

/************************************************************************************
PAGE-TOP
*************************************************************************************/
#page-top {
	width:50px;
	height:50px;
    position:fixed;
	right:10px;
	bottom:10px;
	/*z-index:99999;*/
	z-index:9990;
}
#page-top a {
	width:50px;
	height:50px;
	display:block;
	background-image:url(../images/common/totop.png);
	background-size:50px;
	background-repeat:no-repeat;
	background-position:center;
	filter: alpha(opacity=50);
	-moz-opacity:0.5;
	opacity:0.5;
    display:block;
	-webkit-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-o-transition-duration: 1s;
	-ms-transition-duration: 1s;
	transition-duration: 1s;
}
#page-top a:hover {
	background-image:url(../images/common/totop.png);
	background-size:50px;
	background-repeat:no-repeat;
	background-position:center;
	filter:alpha(opacity=100);
	-moz-opacity:1.0;
	opacity:1.0;
	-webkit-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-o-transition-duration: 1s;
	-ms-transition-duration: 1s;
	transition-duration: 1s;
}

/************************************************************************************
INTRO
*************************************************************************************/
article#intro {
	width:100%;
	height:calc(100vh - 116px);
	margin-top:116px;
	overflow:hidden;
}
article#intro section {
	width:100%;
	height:100%;
	text-align:center;
	background-image:url(../images/common/eye_aje.png);
	background-size:20vw;
	background-position:right bottom;
	background-repeat:no-repeat;
	display:flex;
	align-items:center;
}
article#intro section img {
	display:block;
	margin:0 auto;
}

@media only screen and (max-width: 1269px){
	article#intro {
		height:calc(100vh - 116px);
		margin-top:10px;
	}
	article#intro section {
		background-size:25vw;
	}
	article#intro section img {
		width:85vw;
		display:block;
	}
}

@media only screen and (max-width: 570px){
	article#intro section {
		background-size:40vw;
	}
}

/************************************************************************************
ABOUT
*************************************************************************************/
article#about {
	color:rgba(255,255,255,1);
	/* SP:2rem | TB:2.5rem | PC:3rem */
	/*font-size: calc(1.25vw + 1.5rem);*/
	/* SP:1.4rem | TB:1.5rem | PC:1.6rem */
	width:100%;
	padding:121px 20px 50px;
	margin-top:-71px;
	overflow:hidden;
}
article#about div.aboutWrap {
	padding:50px 0 0;
	margin-top:-50px;
}
article#about h1 {
	color:rgba(59,59,59,1);
	font-size: calc(0.25vw + 1.3rem);
}
article#about section ul {
	text-align:center;
}
article#about section ul li {
	font-size: calc(0.18vw + 1.1rem);
	width:30%;
	line-height:180%;
	margin-left:5%;
	padding:70px 30px;
	float:left;
}
article#about section ul li:first-child {
	margin-left:0;
}

/*  YouTube動画レスポンシブ対応CSS */
.ytube {
	width:50%;/* パソコン横幅変更 */ 
	padding:0;
	margin:50px auto 0;
}

.ytube .inner {
	padding-top:56.25%;/* 56.25%は16:9の画面の場合で、4:3の画面では75%とする */
	position:relative;
	height:0;
	overflow:hidden;
	margin: 0 auto;
}
.ytube .inner iframe {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}		

@media only screen and (max-width: 1269px){
	article#about {
		padding:121px 10px 0;
	}
	article#about div.aboutWrap {
		padding:30px 10px 0;
		margin-top:-30px;
	}
	article#about section ul li {
		width:100%;
		line-height:150%;
		margin-left:0;
		padding:30px;
		margin-bottom:30px;
		float:none;
	}
	.ytube {
		width:100%;
		margin:10px auto 0;
	}
}

/************************************************************************************
SERVICE
*************************************************************************************/
article#service {
	line-height:180%;
	width:100%;
	/*background-image:url(../images/common/road.png);
	background-position:center bottom 450px;
	background-size:19%;
	background-repeat:no-repeat;*/
	padding:121px 20px 50px;
	margin-top:-51px;
	overflow:hidden;
}
article#service section div {
	width:100%;	
}
article#service div h1 {
	font-size: calc(0.2vw + 1.2rem);
	line-height:150%;
	width:50%;
	height:100%;
	padding:100px;
}
article#service div p {
	font-size: calc(0.18vw + 1.0rem);
	line-height:180%;
	width:50%;
	height:auto;
	padding:100px;
}
.leftPost h1, rightPost p {
	float:left;
}
.leftPost p, rightPost h1 {
	float:right;
}
.rightPost h1,leftPost p {
	float:right;
}
.rightPost p, rightPost h1 {
	float:left;
}
.bg_red_ballon {
	background-image:url(../images/common/cloud01.png);
	background-position:center;
	background-size:contain;
	background-repeat:no-repeat;
}
.bg_yellow_ballon {
	background-image:url(../images/common/cloud02.png);
	background-position:center;
	background-size:contain;
	background-repeat:no-repeat;
}
.bg_green_ballon {
	background-image:url(../images/common/cloud03.png);
	background-position:center;
	background-size:contain;
	background-repeat:no-repeat;
}
.bg_blue_ballon {
	background-image:url(../images/common/cloud04.png);
	background-position:center;
	background-size:contain;
	background-repeat:no-repeat;
}
.point {
	font-size: calc(0.14vw + 1.0rem);
	line-height:190%;
	margin-top:50px;
}
@media only screen and (max-width: 1269px){
	article#service {
		background-position:center bottom 430px;
		background-size:78%;
		padding:121px 10px 0;
		margin-top:-81px;
	}
	article#service div h1, article#service div p {
		width:100%;
	}
	article#service div h1 {
		padding:0;
		margin-bottom:20px;
	}
	article#service div p {
		padding:80px 0;
		margin-bottom:50px;
	}
	.leftPost h1, .leftPost p, .rightPost h1, .rightPost p {
		float:none;
	}
	.bg_red_ballon {
		background-size:contain;
	}
	.point {
		margin-top:10px;
	}
}

/************************************************************************************
LECTURE
*************************************************************************************/
article#lecture {
	width:100%;
	padding:121px 20px 50px;
	margin-top:-51px;
	overflow:hidden;
}
/************************************************************************************
Blog
*************************************************************************************/
#blog {
	width:94%;
	padding:50px 3% 0;
	/*margin-top:50px;*/
	text-align:center;
	min-height:100%;
}
#blogArticle {
	width:1270px;
	margin:0 auto;
}
#articleList {
    width:1280px;
    margin-right:-10px;
	overflow:hidden;
}
	
.blogPost {
	width: 300px;
	height:auto;
	margin-right:10px;
	margin-bottom:10px;
	float: left;
	border-top: 10px solid rgba(149,187,192,1);
	overflow: hidden;
	-webkit-box-shadow: 1px 1px 2px #e6e6e6;
	-moz-box-shadow: 1px 1px 2px #e6e6e6;
	box-shadow: 1px 1px 2px #e6e6e6;
	cursor: default;
	text-align:left;
	font-size:14px;
	background-color:#FFFFFF;
}
/*#blogArticle a {
	color:#191919;
	text-decoration:underline;
}*/
#blogArticle a:hover {
	text-decoration:none;
}

.blogPost img {
   display: block;
   position: relative;
}
.blogPost img{
	width:100%;
	height:auto;
	-webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.blogPost:hover img {
   -webkit-transform: scale(1.1,1.1);
   -moz-transform: scale(1.1,1.1);
   -o-transform: scale(1.1,1.1);
   -ms-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
}
.postdate {
	padding:10px;
	font-size:12px;
	text-align:right;
}
.updatetitle {
	padding:10px;
	font-size:16px !important;
	text-align:center;
	font-weight:700;
}
.updatetitle a {
	color:#3b3b3b;
	text-decoration:underline;
	white-space:normal !important;
}
.postImg {
	width:100%;
	height:auto;
	max-height:
}
.excerptT {
	padding:10px;
	font-size:14px !important;
}
.moreLink {
	padding:10px;
	text-align:right;
}
.moreLink a {
	width:70px;
	height:16px;
	line-height:16px;
	background-color:rgba(149,187,192,1);
	padding:5px;
	color:#FFFFFF;
	-webkit-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-o-transition-duration: 1s;
	-ms-transition-duration: 1s;
	transition-duration: 1s;
}
.moreLink a:hover {
	background-color:#3b3b3b;
	-webkit-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-o-transition-duration: 1s;
	-ms-transition-duration: 1s;
	transition-duration: 1s;
}
.toBlog {
	text-align:right;
	font-size:18px;
	padding-top:20px;
}
.toBlog a {
	width:112px;
	height:19px;
	line-height:19px;
	background-color:rgba(149,187,192,1);
	padding:5px;
	color:#FFFFFF;
	-webkit-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-o-transition-duration: 1s;
	-ms-transition-duration: 1s;
	transition-duration: 1s;
}
.toBlog a:hover {
	background-color:#3b3b3b;
	-webkit-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-o-transition-duration: 1s;
	-ms-transition-duration: 1s;
	transition-duration: 1s;
}	
@media screen and (max-width:1269px) {
	#blogArticle, #articleList {
		width:100%;
	}
	#articleList {
		margin-right:0;
		margin-left:20px;
	}
	.blogPost {
		width:45%;
		border:5%;
		/*height:100%;*/
	}
}
@media screen and (max-width:815px) {
	#articleList {
		margin-right:0;
		margin-left:10px;
	}
}
@media screen and (max-width:640px) {
	#articleList {
		margin-right:0;
		margin-left:2%;
	}
	.blogPost {
		width:97%;
		border:5%;
		/*height:100%;*/
		margin:0 auto 10px;
		float:none;
	}
}


/************************************************************************************
CONTACT
*************************************************************************************/
#contact {
	width:100%;
	padding:121px 20px 0;
	margin:-51px auto 50px;
	overflow:hidden;
}
#contact div.section1270 {
	background-image:url(../images/common/emotion02_.png);
	background-position:25% center;
	background-size:15%;
	background-repeat:no-repeat;
}
#contact section {
	width:49%;
	margin-bottom:30px;
}
#contact section#cForm {
	float:right;
}
#contact section#cForm form {
	width:100%;
	text-align:left;
}
#contact form .text {
	width:282px;
	height:28px;
	margin-bottom:10px;
}
#contact form textarea {
	width:100%;
	max-width:602px !important;
	height:100px;
	margin-bottom:10px;
}
@media only screen and (max-width: 1269px){
	#contact {
		padding:121px 10px 0;
	}
	#contact div.section1270 {
		background-image:url(../images/common/emotion02.png);
		background-position:right center;
		background-size:15%;
		background-repeat:no-repeat;
	}
	#contact section {
		width:100%;
	}
	#contact section#map {
		float:none;
	}
	#contact section#cForm {
		float:none;
	}
	#contact form .text {
		width:80%;
	}
	#contact form textarea {
		max-width:100% !important;
	}
}

/************************************************************************************
FOOTER
*************************************************************************************/
footer#footer {
	color:rgba(59,59,59,1);
	font-size:12px !important;
	/*padding:0 20px 15px;*/
	padding:0;
	position:relative;
}
footer#footer a {
	color:rgba(255,255,255,1) !important;
}
footer#footer h1 {
	margin-bottom:0;
}
footer#footer h2 {
	margin-bottom:20px;
}
footer#footer div.section1270 {
	margin-bottom:0 !important;
}
footer#footer section {
	width:33.333%;
	margin:0 auto 30px;
}
footer#footer section#fSocial ul {
	width:198px;
	margin:10px auto 0;
}
footer#footer section#fSocial ul li {
	padding:0 10px;
	float:left;
}

footer#footer div#copyrights {
	font-size:10px;
	text-align:center;
	line-height:140%;
	background-color:rgba(242,242,242,1);
	line-height:30px;
}
@media only screen and (max-width: 1269px){
	footer#footer {
		width:100%;
		padding:0 10px 15px;
	}
	footer#footer section {
		width:100%;
		padding:0 10px;
		margin-bottom:20px;
		float:none;
	}
	footer#footer section#fAdd {
		text-align:center;
		padding:0 
	}
	footer#footer section#fAdd ul {
		width:250px;
		margin:0 auto 20px;
	}
	footer#footer section#fSocial ul {
		margin:0 auto 20px;
	}
	footer#footer section#fOpen {
		text-align:center;
	}
	footer#footer section#fOpen li span.lSpace {
		letter-spacing:0;
	}
}

/************************************************************************************
ANIMATION
*************************************************************************************/
/*  CSS3 ANIMATION vibe  */
@keyframes vibe {
    0% {transform: scale(5); opacity: 0;}
    60% {transform: scale(1); opacity: 1;}
    65% {transform: translate(0px, 0px) rotateZ(0deg);opacity: 1;}
    75% {transform: translate(2px, 2px) rotateZ(1deg);opacity: 1;}
    85% {transform: translate(0px, 2px) rotateZ(0deg);opacity: 1;}
    95% {transform: translate(2px, 0px) rotateZ(-1deg);opacity: 1;}
    100% {transform: translate(0px, 0px) rotateZ(0deg);opacity: 1;}
}
.vibe {
	-webkit-animation-name: vibe;
	animation-name: vibe;
}

/*========= 流れるテキスト ===============*/

/*全共通*/

.slide-in {
  overflow: hidden;
  display: inline-block;
}

.slide-in_inner {
  display: inline-block;

}

/*左右のアニメーション*/
.leftAnime{
    opacity: 0;/*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
  animation-name:slideTextX100;
  animation-duration:1.0s;
  animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes slideTextX100 {
  from {
  transform: translateX(-100%); /*要素を左の枠外に移動*/
        opacity: 0;
  }

  to {
  transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}

.slideAnimeRightLeft {
  animation-name:slideTextX-100;
  animation-duration:1.0s;
  animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes slideTextX-100 {
  from {
  transform: translateX(100%);/*要素を右の枠外に移動*/
    opacity: 0;
  }

  to {
  transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}

.anim-box.poyoyon3.is-animated {
  animation: poyoyon3 2.5s infinite;
  opacity: 1;
}

@keyframes poyoyon3 {
  0%, 40% {
    transform: skew(0deg, 0deg);
  }
  5% {
    transform: skew(5deg, 5deg);
  }
  10% {
    transform: skew(-4deg, -4deg);
  }
  15% {
    transform: skew(3deg, 3deg);
  }
  20% {
    transform: skew(-2deg, -2deg);
  }
  25% {
    transform: skew(1deg, 1deg);
  }
  30% {
    transform: skew(-0.6deg, -0.6deg);
  }
  35% {
    transform: skew(0.3deg, 0.3deg);
  }
}

.anim-box.poyopoyo {
  animation: poyopoyo 2s ease-out infinite;
  opacity: 1;
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}