@charset "utf-8";

/* RESET
----------------------------------------------------------------------------------------------------*/

a,article,body,dd,div,dl,dt,em,form,footer,header,h1,h2,h3,h4,h5,h6,html,i,iframe,img,label,legend,li,nav,ol,p,section,main,span,table,tbody,tfoot,thead,time,tr,th,td,ul,video,figure{font-family:inherit;font-size:100%;font-weight:inherit;font-style:inherit;vertical-align:baseline;white-space:normal;margin:0;padding:0;border:0;outline:0;background:transparent;line-height:1.6;text-align:left}textarea{font-family:inherit;font-size:100%;font-weight:inherit;font-style:inherit;vertical-align:baseline;margin:0;padding:0;border:0;outline:0;background:transparent;line-height:1.6;}article,footer,header,nav,section,main{display:block}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}


/* 設定をしなおす
---------------------------------------------- */

body {
  margin: 0 auto;
  padding: 0;
  font-size: 16px;
  line-height: 1.6em;
  font-family: 'Roboto',"游ゴシック Medium", "Yu Gothic Medium","游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
  font-weight: 500;
  color: #000;
  -webkit-text-size-adjust: 100%;
  -webkit-print-color-adjust: exact;
  word-break: break-all;
}

 body > div > .contents {
	opacity: 0;
}


@media print, screen and ( max-width : 834px ) {
  body {font-size: 16px;}
}

table {
  margin : 0;
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
}


/* アンカータグの設定
---------------------------------------------- */

a {
  outline:none;
  color: #000;
}
a:hover {
  text-decoration: none;
}
a,a:hover,a:hover img {
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  text-decoration: none;
}
a:hover {
  filter: alpha(opacity=80);
  -moz-opacity:0.80;
  opacity:0.80;
}
a.mainlink{
	text-decoration: underline;
	color: #00aca9;
}


/* 表示・非表示切替
---------------------------------------------- */
.pcOnly {display: block !important;}
.spOnly {display: none !important; }

@media only screen and (max-width: 834px) {
.pcOnly { display: none !important; }
.spOnly { display: block !important; }
}


/* 要素の位置

---------------------------------------------- */
.taC {
  text-align: center !important;
}

.taR {
  text-align: right !important;
}

.taL {
  text-align: left !important;
}

.vaM {vertical-align: middle;}
.vaS {vertical-align: sub;}

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

.container {
    margin: 0 auto;
}

.clr:after,
.col:after,
.container:after,
.group:after,
.row:after {
    content: "";
    display: table;
    clear: both;
}

.row {
    padding-bottom: 0;
}

.col {
    display: block;
    float: left;
    width: 100%;
}

/* PC・印刷時 */
@media (min-width: 835px), print {
    .gutters .col {
        margin-left: 2%;
    }
    .gutters .col:first-child {
        margin-left: 0;
    }
    .gutters .colR:first-child {
        margin-right: 0;
    }
    .sp {
        display: none;
    }
}

/* スマホ時 */
@media (max-width: 834px) {
    .sp_none {
        display: none !important;
    }
}


img {
    max-width: 100%;
    height: auto;
    width:auto; /*IE8のみ適用*/
	vertical-align: bottom;
	border: none;
	image-rendering: -webkit-optimize-contrast;
}
img.img_put{
	width: 100%;
    object-fit: cover;
    object-position: 100% 0;
    height: 200px;
}
.img-half{
	width: 50%;
}
.indent-txt{ text-indent: 1em;}
.indent, .indent2 { margin-left: 1.0em;}
.indent li { text-indent: -1.0em;}
.indent2 li { text-indent: -1.5em;}
.noindent{
	text-indent: 0em!important;
	padding-bottom: 10px!important;
}

@media print, screen and ( max-width : 834px ) {
  .sbox {
    margin-bottom: 20px;
  }
}

@media print, screen and ( max-width : 374px ) {
  .container {
    padding: 0 10px;
  }
}

@media print, screen and ( min-width : 835px ) {
  .sbox {
    margin-bottom: 25px;
  }
  .br br{
	  display: none;
	 }
  /*section {
    padding: 200px 0;
  }*/
}

.center{ margin: 0 auto;}
.center-t{ text-align: center;}
.txt-right{ text-align: right;}

.layout-center{
	max-width: 1200px;
	margin: 0 auto;
}
.layout-center-m{
	max-width: 1100px;
	margin: 0 auto;
}
.layout-center-s{
	max-width: 1000px;
	margin: 0 auto;
}
.layout-center-ss{
	max-width: 850px;
	margin: 0 auto;
	padding: 0 15px;
}
.contents_space{
	padding: 0 15px;
}
.point-txt{
	font-size: 0.9em;
	color: #FFF;
	padding: 3px 8px;
	border-radius: 6px;
	background-color: #F00;
}
/*  
-------------------------------------------------スペース */
.pd1lr{ padding: 0 1em 0 1em;}
.pd1t{ padding-top: 1em;}
.pd2t{ padding-top: 2em;}
.pd3t{ padding-top: 3em;}
.pd3b{ padding-bottom: 3em;}
.pd10t{ padding-top: 10px;}
.pd30t{ padding-top: 30px;}
.pd50t{ padding-top: 50px;}
.pd10b{ padding-bottom: 10px;}
.pd20b{ padding-bottom: 20px;}
.pd30b{ padding-bottom: 30px;}
.pd40b{ padding-bottom: 40px;}
.pd50b{ padding-bottom: 50px;}
.pd5l{ padding-left: 5px;}
.pd10l{ padding-left: 10px;}
.pd15l{ padding-left: 15px;}
.pd20l{ padding-left: 20px;}
.pd30l{ padding-left: 30px;}
.pd15l{ padding-left: 15px;}
.pd5r{ padding-right: 5px;}
.pd10r{ padding-right: 10px;}
.pd15r{ padding-right: 15px;}
.pd20r{ padding-right: 20px;}
.pd30r{ padding-right: 30px;}
.pd15r{ padding-right: 15px;}

.mg2b{ margin-bottom: 2em;}
.mg3b{ margin-bottom: 3em;}
.mg5t{ margin-top: 5px;}
.mg10t{ margin-top: 10px;}
.mg20t{ margin-top: 20px;}
.mg30t{ margin-top: 30px;}
.mg40t{ margin-top: 40px;}
.mg50t{ margin-top: 50px;}
.mg60t{ margin-top: 60px;}
.mg100t{ margin-top: 100px;}
.mg05b{ margin-bottom: 5px;}
.mg10b{ margin-bottom: 10px;}
.mg20b{ margin-bottom: 20px;}
.mg30b{ margin-bottom: 30px;}
.mg40b{ margin-bottom: 40px;}
.mg50b{ margin-bottom: 50px;}
.mg60b{ margin-bottom: 60px;}
.mg70b{ margin-bottom: 70px;}
.mg80b{ margin-bottom: 80px;}
.mg90b{ margin-bottom: 90px;}
.mg100b{ margin-bottom: 100px;}
.mg5r{ margin-right: 5px;}
.mg10r{ margin-right: 10px;}
.mg20r{ margin-right: 20px;}
.mg30r{ margin-right: 30px;}
.mg40r{ margin-right: 40px;}
.mg50r{ margin-right: 50px;}
.mg10l{ margin-left: 10px;}
.mg20l{ margin-left: 10px;}
.mg30l{ margin-left: 30px;}
.mg40l{ margin-left: 40px;}
.mg50l{ margin-left: 50px;}

.space-sp{ padding: 0 30px}
.bnr-sp img{
	width: 100%;
	min-height: 200px;
	object-fit: cover;
	object-position: 5% 100%;
}
@media print, screen and ( max-width : 500px ) {
	.space-sp{ padding: 0 15px}
	.img-half{ width: 100%;}
}

/*  
-------------------------------------------------テキスト行間 */
.letter-1sp{ letter-spacing: -1px;}
.letter-3sp{ letter-spacing: -3px;}
.letter4sp{ letter-spacing: 4px;}
.letter5sp{ letter-spacing: 5px;}
.letter6sp{ letter-spacing: 6px;}
.letter7sp{ letter-spacing: 7px;}

/*  
-------------------------------------------------フォントカラー */
.maincolor{ color: #00aca9;}
.pointcolor{ color: #e81616;}
.color-w{ color: #FFF;}
.ao{ color: #0068b7;}
.font-enji{ color: #a05252;}

/*  
-------------------------------------------------背景カラー */
.bgcolor-main{ background: #00aca9;}
.bgcolor-a{ background: #f9f7ec;}
.bgcolor-b{ background: #c7e8e8;}
.bgcolor-c{ background: #f7f4e3;}
.bgcolor-d{ background: #efefef;}
.bgcolor-e{ background: #f2f7e3;}
.bgcolor-f{ background: #c1e5ba;}
.bgcolor-g{ background: #f3f3f3;}
.bgcolor-h{ background: #f2efe9;}
.bgcolor-w{ background: #FFF;}
.bgcolor-category01{ background: #e1d1be;}
.bgcolor-category02{ background: #dfe8e9;}
.bgcolor-category03{ background: #edebab;}
.bgcolor-category04{ background: #f9e5e5;}
.bgcolor-category05{ background: #bac6cd;}
.bgcolor-category06{ background: #c7bcca;}
.bgcolor-category07{ background: #b0c1b2;}
.bgcolor-voice{ background: #a59971;}
.bgcolor-voice-resto{ background-color: #eae0d7;}
.bgcolor-takumi{ background: #737d80;}
.bgcolor-takumi-resto{ background-color: #e8e8e8;}
.bgcolor-recipe{ background: #f7ecbe;}
.bgcolor-maint{ background: #e4f6fa;}
.bg-grad-green{
	background: -moz-linear-gradient(top, #e6e8c6, #FFF);
    background: -webkit-linear-gradient(top, #e6e8c6, #FFF);
    background: linear-gradient(to bottom, #e6e8c6, #FFF);
}
.bgcolor-pfi{ background-color: #f4f4f4;}


/*  
-------------------------------------------------強調テキスト */
.aka-line{
	display: inline;
    font-size: 20px;
    line-height: 2;
    padding: 0 5px;
    margin-bottom: 25px;
    background: linear-gradient(transparent 70%, #ff93a5 70%);
}
.line-under{
	text-decoration: underline;
}
.fwb {font-weight: bold;}
/*  
-------------------------------------------------フォント */
.jp-mincho{ font-family: 'Noto Serif JP', sans-serif;}
.jp-gothic{ font-family: 'Noto Sans JP', sans-serif;}
.en-gothic{ font-family: 'Niramit', sans-serif;}
.en-gothic-maru{ font-family: 'Raleway', sans-serif;}


/*  
-------------------------------------------------フォントサイズ */
.txt-2em{ font-size: 2em;}
.txt-ss{ font-size: 12px;}

/*  
-------------------------------------------------アイコン */
.ico {
	vertical-align: text-top;
	margin-left: 5px;
}

/*  
-------------------------------------------------丸ボタン */
@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icomoon/icomoon.eot');
	src:url('../fonts/icomoon/icomoon.eot?#iefix') format('embedded-opentype'),
url('../fonts/icomoon/icomoon.woff') format('woff'),
url('../fonts/icomoon/icomoon.ttf') format('truetype'),
url('../fonts/icomoon/icomoon.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}
.color-4 {
	background: #2ecc71;
}
.btn {
	border: none;
	font-family: inherit;
	font-size: inherit;
	line-height: 3.3;
	color: inherit;
	background: none;
	cursor: pointer;
	padding: 0 60px;
	padding-top: 5px;
	display: inline-block;
	text-transform: uppercase;
	font-weight: 700;
	outline: none;
	position: relative;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.btn:after {
	content: '';
	position: absolute;
	z-index: -1;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.btn-link{
	display: inline-block;
    padding: 0.3em 1em;
    text-decoration: none;
    color: #ff3131;
    border: solid 2px #ff3131;
    border-radius: 3px;
    transition: .4s;
}
.btn-link:hover {
    background: #ff3131!important;
    color: white!important;
}
.btn-link02{
	display: inline-block;
    padding: 0.3em 1em;
    text-decoration: none!important;
    color: #ff3131;
    border: solid 2px #00aba8;
    border-radius: 3px;
    transition: .4s;
}
.btn-link02:hover {
    background: #00aba8!important;
    color: white!important;
}

/* Pseudo elements for icons */
.btn:before{
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	position: relative;
	-webkit-font-smoothing: antialiased;
}

.btn-type-white {
	border-radius: 50px;
	border: 3px solid #FFF;
	color: #FFF;
	overflow: hidden;
}
.btn-type-gray {
	border-radius: 50px;
	border: 3px solid #a8a8a8;
	color: #a8a8a8;
	overflow: hidden;
}
.btn-type-main {
	border-radius: 50px;
	border: 3px solid #00aca9;
	color: #00aca9;
	overflow: hidden;
	background-color: #FFF;
}
.btn-type-wakakusa {
	border-radius: 50px;
	border: 3px solid #8eb21f;
	color: #8eb21f;
	overflow: hidden;
}
.btn-type-lightblue {
	border-radius: 50px;
	border: 3px solid #65c8ef;
	color: #65c8ef;
	overflow: hidden;
}
.btn-type-green {
	border-radius: 50px;
	border: 3px solid #4cb639;
	color: #4cb639;
	overflow: hidden;
}
.btn-type-orange {
	border-radius: 50px;
	border: 3px solid #ff6b2e;
	color: #ff6b2e;
	overflow: hidden;
}
.btn-type-purple {
	border-radius: 50px;
	border: 3px solid #b692e4;
	color: #b692e4;
	overflow: hidden;
}
.btn-type-brown {
	border-radius: 50px;
	border: 3px solid #847646;
	color: #847646;
	overflow: hidden;
}
.btn-type-blue {
	border-radius: 50px;
	border: 3px solid #2d3c68;
	color: #2d3c68;
	overflow: hidden;
}
.btn-type-macha {
	border-radius: 50px;
	border: 3px solid #4f6007;
	color: #4f6007;
	overflow: hidden;
}
.btn-type-pink {
	border-radius: 50px;
	border: 3px solid #ff4f48;
	color: #ff4f48;
	overflow: hidden;
}
.btn-type-enji {
	border-radius: 50px;
	border: 3px solid #b26464;
	color: #b26464;
	overflow: hidden;
}
.btn-type-khaki {
	border-radius: 50px;
	border: 3px solid #2d5e5d;
	color: #2d5e5d;
	overflow: hidden;
}
.btn-type-momo {
	border-radius: 50px;
	border: 3px solid #f4aaa3;
	color: #f4aaa3;
	overflow: hidden;
}
.btn-type-footer {
	border-radius: 50px;
	color: #00aaa7;
	overflow: hidden;
	background-color: #ffffff;
}

.btn-type-white:active {
	border-color: #FFF;
	color: #FFF;
}
.btn-type-gray:active {
	border-color: #a8a8a8;
	color: #a8a8a8;
}
.btn-type-main:active {
	border-color: #00aca9;
	color: #00aca9;
}
.btn-type-wakakusa:active {
	border-color: #8eb21f;
	color: #8eb21f;
}
.btn-type-lightblue:active {
	border-color: #65c8ef;
	color: #65c8ef;
}
.btn-type-green:active {
	border-color: #4cb639;
	color: #4cb639;
}
.btn-type-orange:active {
	border-color: #ff6b2e;
	color: #ff6b2e;
}
.btn-type-purple:active {
	border-color: #b692e4;
	color: #b692e4;
}
.btn-type-brown:active {
	border-color: #847646;
	color: #847646;
}
.btn-type-blue:active {
	border-color: #2d3c68;
	color: #2d3c68;
}
.btn-type-macha:active {
	border-color: #4f6007;
	color: #4f6007;
}
.btn-type-pink:active {
	border-color: #ff4f48;
	color: #ff4f48;
}
.btn-type-enji:active {
	border-color: #b26464;
	color: #b26464;
}
.btn-type-khaki:active {
	border-color: #2d5e5d;
	color: #2d5e5d;
}
.btn-type-momo:active {
	border-color: #f4aaa3;
	color: #f4aaa3;
}
.btn-type-footer:active {
	border-color: #f2968c;
	color: #f2968c;
}

.btn-type-white:hover {
	background: #313131;
}
.btn-type-gray:hover,
.btn-type-main:hover,
.btn-type-wakakusa:hover,
.btn-type-lightblue:hover,
.btn-type-green:hover,
.btn-type-orange:hover,
.btn-type-purple:hover,
.btn-type-brown:hover,
.btn-type-blue:hover,
.btn-type-macha:hover,
.btn-type-pink:hover,
.btn-type-enji:hover,
.btn-type-khaki:hover,
.btn-type-momo:hover,
.btn-type-footer:hover {
	background: #FFF;
}

.btn-type-white:before {
	position: absolute;
	height: 100%;
	font-size: 125%;
	line-height: 3;
	color: #FFF;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.btn-type-gray:before {
	position: absolute;
	height: 100%;
	font-size: 125%;
	line-height: 3;
	color: #a8a8a8;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.btn-type-main:before {
	position: absolute;
	height: 100%;
	font-size: 125%;
	line-height: 3;
	color: #00aca9;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.btn-type-wakakusa:before {
	position: absolute;
	height: 100%;
	font-size: 125%;
	line-height: 3;
	color: #8eb21f;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.btn-type-lightblue:before {
	position: absolute;
	height: 100%;
	font-size: 125%;
	line-height: 3;
	color: #65c8ef;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.btn-type-green:before {
	position: absolute;
	height: 100%;
	font-size: 125%;
	line-height: 3;
	color: #4cb639;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.btn-type-orange:before {
	position: absolute;
	height: 100%;
	font-size: 125%;
	line-height: 3;
	color: #ff6b2e;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.btn-type-purple:before {
	position: absolute;
	height: 100%;
	font-size: 125%;
	line-height: 3;
	color: #b692e4;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.btn-type-brown:before {
	position: absolute;
	height: 100%;
	font-size: 125%;
	line-height: 3;
	color: #847646;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.btn-type-blue:before {
	position: absolute;
	height: 100%;
	font-size: 125%;
	line-height: 3;
	color: #2d3c68;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.btn-type-macha:before {
	position: absolute;
	height: 100%;
	font-size: 125%;
	line-height: 3;
	color: #4f6007;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.btn-type-pink:before {
	position: absolute;
	height: 100%;
	font-size: 125%;
	line-height: 3;
	color: #ff4f48;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.btn-type-enji:before {
	position: absolute;
	height: 100%;
	font-size: 125%;
	line-height: 3;
	color: #b26464;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.btn-type-khaki:before {
	position: absolute;
	height: 100%;
	font-size: 125%;
	line-height: 3;
	color: #2d5e5d;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.btn-type-momo:before {
	position: absolute;
	height: 100%;
	font-size: 125%;
	line-height: 3;
	color: #f4aaa3;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.btn-type-footer:before {
	position: absolute;
	height: 100%;
	font-size: 125%;
	line-height: 3;
	color: #00aaa7;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.btn-type-white:active:before,
.btn-type-gray:active:before,
.btn-type-main:active:before,
.btn-type-wakakusa:active:before,
.btn-type-lightblue:active:before,
.btn-type-orange:active:before,
.btn-type-purple:active:before,
.btn-type-brown:active:before,
.btn-type-blue:active:before,
.btn-type-macha:active:before,
.btn-type-pink:active:before,
.btn-type-enji:active:before,
.btn-type-khaki:active:before,
.btn-type-momo:active:before,
.btn-type-footer:active:before {
	color: #17954c;
}

/* 矢印が出る方向 */
.btn-yajirushi:before {
	left: 70%;
	opacity: 0;
	top: 0;
}
.btn-yajirushi:hover:before {
	left: 80%;
	opacity: 1;
}
.icon-arrow-right:before {
	content: "\e00d";
}

.btn-top{
	display: inline-block;
	padding: 10px 20px;
	border-radius: 60px;
	border: 1px solid #999;
    background-color: #e2e2e2;
}


/*  
-------------------------------------------------フェードイン */
/* 開いた時　下→上 */
.fadeinupDtoU{
	animation: fadeinupDtoU 900ms ease 0s 1 normal;
    -webkit-animation: fadeinupDtoU 900ms ease 0s 1 normal;
}
@keyframes fadeinupDtoU {
    0% {opacity: 0;transform : translate(0, 50px);}
    100% {opacity: 1;transform : translate(0, 0);}
}

/* 開いた時　右→左 */
.fadeinupRtoL{
	animation: fadeinupRtoL 900ms ease 0s 1 normal;
    -webkit-animation: fadeinupRtoL 900ms ease 0s 1 normal;
}
@keyframes fadeinupRtoL {
    0% {opacity: 0; transform : translateX(50px);}
    100% {opacity: 1; transform : translateY(0);}
}

/* 開いた時　左→右 */
.fadeinupLtoR {
	animation: fadeinupLtoR 900ms ease 0s 1 normal;
    -webkit-animation: fadeinupLtoR 900ms ease 0s 1 normal;
}
@keyframes fadeinupLtoR {
    0% {opacity: 0; transform : translateX(-50px);}
    100% {opacity: 1; transform : translateY(0);}
}


/* 開いた時　上→下 */
.fadeinupUtoD{
	animation: fadeinupUtoD 900ms ease 0s 1 normal;
    -webkit-animation: fadeinupUtoD 900ms ease 0s 1 normal;
}
@keyframes fadeinupUtoD {
    0% {opacity: 0; transform : translateY(-50px);}
    100% {opacity: 1; transform : translateY(0);}
}

/*
@media print, screen and ( max-width : 834px ) {
	.fadeinupDtoU,
	.fadeinupRtoL,
	.fadeinupLtoR,
	.fadeinupUtoD{
		animation: none;
	}
}
*/


/* 下→上 */
.fadeinDtoU {
    opacity : 0;
    transform : translate(0, 50px);
    transition : all 900ms;
}
.fadeinDtoU.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}
/* 右→左 */
.fadeinRtoL {
    opacity : 0;
    transform : translateX(50px);
    transition : all 900ms;
}
.fadeinRtoL.scrollin {
    opacity : 1;
    transform : translateX(0);
}
/* 左→右 */
.fadeinLtoR {
    opacity : 0;
    transform : translateX(-50px);
    transition : all 900ms;
}
.fadeinLtoR.scrollin {
    opacity : 1;
    transform : translateX(0);
}
/* 上→下 */
.fadeinUtoD {
    opacity : 0;
    transform : translateY(-50px);
    transition : all 900ms;
}
.fadeinUtoD.scrollin {
    opacity : 1;
    transform : translateY(0);
}

@media print, screen and ( max-width : 834px ) {
	.fadein,
	.fadein.scrollin,
	.fadeinRtoL,
	.fadeinRtoL.scrollin,
	.fadeinLtoR,
	.fadeinLtoR.scrollin,
	.fadeinUtoD,
	.fadeinUtoD.scrollin{
/*		opacity: 1;*/
		transform : none;
/*		transition: none;*/
	}

}

/*  
-------------------------------------------------ページトップ */
.pagetop {
	position: fixed;
	bottom: -70px;
	right: 20px;
	z-index: 5;
}
.pagetop a {
	display: block;
	width: 50px;
	height: 50px;
	text-decoration: none;
	line-height: 50px;
}

/*  
-------------------------------------------------ページ内リンク */
.pagelink::before {
    content: "";
    display: inline-block;
    height: 50px;
    margin-top: -50px;
    vertical-align: top;
}
.pagelink2::before {
    content: "";
    display: inline-block;
    height: 90px;
    margin-top: -90px;
    vertical-align: top;
}
.pagelink3::before {
    content: "";
    display: inline-block;
    height: 100px;
    margin-top: -100px;
    vertical-align: top;
}

/*  
-------------------------------------------------object-fitをIEに適用させるため */
.fitIE{
      object-fit: cover;
      font-family: 'object-fit: cover;'
}

/*  
-------------------------------------------------セカンドページ　タイトル */
.recruit-title{
    background-image: url(../images/bg_title_recruit.jpg);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
	margin-top: 80px;
}
.normal-title{
    background-image: url(../images/bg_title.jpg);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
	margin-top: 80px;
}
.company-title{
    background-image: url(../images/bg_title_company.jpg);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
	margin-top: 80px;
}
.school-title{
    background-image: url(../images/bg_title_school.jpg);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
	margin-top: 80px;
}
.media-title{
    background-image: url(../images/bg_title_media.jpg);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
	margin-top: 80px;
}
.product-title{
    background-image: url(../images/bg_title_product.jpg);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
	margin-top: 80px;
}

.recruit-title h1,
.company-title h1,
.normal-title h1,
.school-title h1,
.media-title h1,
.product-title h1{
	max-width: 1300px;
	text-align: center;
	font-size: 2em;
	color: #FFF;	
	margin: 0 auto;
	padding: 1.5em;
}
.subt-a{
	position: relative;
    font-size: 20px;
    line-height: 1.7;
    text-shadow: 0 0 2px white;
    background: #f5d67d;
    z-index: -4;
    border-radius: 0 10px 10px;
	margin-bottom: 20px;
}

.subt-a:before {
	content: "";
	position: absolute;
	background: #ffaf48;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	top: 50%;
	left: -15px;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: -1;
}

@media print, screen and ( max-width : 834px ) {
	.recruit-title,
	.company-title,
	.normal-title,
	.school-title,
	.media-title,
	.product-title{
		margin-top: 60px;
	}
	.recruit-title h1,
	.company-title h1,
	.normal-title h1,
	.school-title h1,
	.media-title h1,
	.product-title h1{
		font-size: 1.5em;
	}
}

/*  
-------------------------------------------------パンくず */
/* .contents {margin-top: 80px;} */
@media only screen and ( max-width : 834px ) {.contents {margin-top: 60px;}}

.pankuzu{
	display: block;
    max-width: 1150px;
    font-size: 0.8em;
    margin: 0 auto;
    padding: 10px 20px;
}
.pankuzu img{
	width: 14px;
	vertical-align: baseline;
}
.pankuzu a{ color: #000;}

@media print, screen and ( max-width : 834px ) {
	.pankuzu{
	}
}


/*  
-------------------------------------------------セカンドページのメニュー */
.sub-menu{
	border-bottom: 1px solid #b5b5b5;
}
.sub-menu ul{
	text-align: center;
}
.sub-menu li{
    display: inline-block;
	/* padding: 0px 10px; */
/*	margin: 15px 0 0;*/
}
.sub-menu.sub-page li{
	padding: 0px 10px;
}
.sub-menu-ss li{
	padding: 3px 10px!important;
	font-size: 14px;
}
.catalog-menu li{
	padding: 3px 10px!important;
	font-size: 15px;
}
.sub-menu li+ li {
  border-left: 1px solid #d6d6d6;
}
.sub-menu a:hover{
	color: #00aca9;
}
.sub-menu a.point{
	font-size: 0.9em;
	color: #FFF;
	padding: 3px 8px;
	border-radius: 6px;
	background-color: #F00;
}
@media print, screen and ( max-width : 500px ) {
	/*.sub-menu{
		display: none;
	}*/
	.sub-menu li:first-child{
		border-left: 1px solid #d6d6d6;
	}
	.sub-menu li:last-child{
		border-right: 1px solid #d6d6d6;
	}
	.sub-menu li{
		padding: 0px 10px;
/*		margin: 6px 0;*/
	}
}


/*  
-------------------------------------------------表 */
table.basic_line {
    margin: 20px 0;
    border-left: 1px solid #CCC;
    border-top: 1px solid #CCC;
}
table.basic_line th, table.basic_line td {
    font-size: 93%;
    line-height: 1.4;
    padding: 5px;
    border-right: 1px solid #CCC !important;
    border-bottom: 1px solid #CCC !important;
}

/*  
-------------------------------------------------グラフ */
dl.graph-a{
	display: table;
	width: 100%;
	padding: 0 20px;
}
.graph-a dt{
	display: table-cell;
	padding: 10px 20px;
	width: 20%;
	border-bottom: 2px solid #3b9cd7;
}
.graph-a dd{
	display: table-cell;
	padding: 20px;
	width: 80%;
	text-align: justify;
	text-justify: inter-ideograph;
	border-bottom: 2px solid #cdcdcd;
}
.graph-a .boder-a{ border-top: 2px solid #3b9cd7;}
.graph-a .boder-b{ border-top: 2px solid #cdcdcd;}
.graph-green{ border-bottom: 2px solid #00aca9 !important;}
.graph-a .boder-a-green{ border-top: 2px solid #00aca9 !important;}

@media print, screen and ( max-width : 834px ) {
	dl.graph-a,
	.graph-a dt,
	.graph-a dd{
		display: block;
	}
	.graph-a dt{
		width: 100%;
		color: #FFF;
		border: none;
		background-color: #3b9cd7;
	}
	.graph-a dd{
		width: 100%;
		padding: 20px 0;
		border: none;
	}
	.graph-a .boder-a,
	.graph-a .boder-b,
	.graph-green,
	.graph-a .boder-a-green{
		border: none !important;
	}
}

dl.graph-b{
	display: table;
	width: 100%;
	padding: 1px 15px 1px 15px;
}	
.graph-b dt{
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	width: 20%;
	color: #000;
	padding: 10px;
}
.graph-b dd{
	display: table-cell;
	padding: 10px;
	width: 80%;
	text-align: justify;
	text-justify: inter-ideograph;
	background-color: #f2f2f2;
}

@media print, screen and ( max-width : 834px ) {
	dl.graph-b,
	.graph-b dt,
	.graph-b dd{
		display: block;
	}
	.graph-b dt{
		width: 100%;
		font-size: 1.2em;
	}
	.graph-b dd{ width: 100%;}
}

dl.graph-c{
	display: table;
	width: 100%;
	padding: 1px 20px 1px 20px;
	border-bottom: 1px dotted #999;
}	
.graph-c dt{
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	width: 20%;
	font-size: 1em;
	color: #000;
	padding: 10px;
	border-right: 1px dotted #999;
}
.graph-c dd{
	display: table-cell;
	padding: 10px;
	width: 80%;
	text-align: justify;
	text-justify: inter-ideograph;
}
.graph-c .boder-top{ border-top: 1px dotted #999;}
@media print, screen and ( max-width : 834px ) {
	dl.graph-c{
		padding: 0;
	}
	.graph-c dd{
		padding: 7px;
	}
}


/*  
-------------------------------------------------フォーム */
select{
	height: 30px;
	margin: 3px 0;
}
textarea {
	height: 70px;
    width: 350px;
	vertical-align:top;
	border: 1px solid #bfbfbf;
}
input.button {
	font-size: 18px;
	padding: 8px 20px;
}
.basic_form dl{
	display: table;
	width: 100%;
	border-top: 1px solid #b0d6d4;
	border-left: 1px solid #b0d6d4;
}
.basic_form dt {
	display: table-cell;
    border-right: 1px solid #b0d6d4;
    padding: 15px;
    width: 250px;
	background-color: #e3f7f6;
	vertical-align: top;
}
.basic_form dd {
	display: table-cell;
    border-right: 1px solid #b0d6d4;
    padding: 15px;
}
.warning{
	color:#FFF;
	font-size: 11px;
	font-weight: bold;
	padding: 2px 4px;
	margin-left: 10px;
	border-radius: 4px;
	background-color: #F00;
	display: inline-block;
}
.form-border{
	border-bottom: 1px solid #b0d6d4;
}
ul.form-select-list:after{
	content:"";
	display: block;
	clear: both;
}
.form-select-list li{
	float: left;
    width: 33.3333%;
}
/*フォームボタン */
.form-area-btn{
	max-width: 1000px;
	margin: 0 auto;
}
.form-area-btn ul:after{
	content:"";
	display: block;
	clear: both;
}
.form-area-btn ul {
	width: 100%;
    margin: 0 auto;
/*
	display: flex;
	justify-content: space-between;
*/
}
.form-area-btn ul li{
	float: left;
    width: 50%;
    padding: 2em .5em;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.form-area-btn ul li a{
	display: block;
	box-shadow: 0 0 6px grey;
}
.btn-catalog,
.btn-consult{
    position: relative;
    display: inline-block;
    padding: 0.6em 0;
    color: #FFF;
    font-size: 1.3em;
    text-align: center;
    text-decoration: none;
    transition: .3s;
    border-radius: 10px;
}
.new-color{ background-color: #00abc4;}
.career-color{ background-color: #00aba8;}
.soudan-color{ background-color: #72991a;}
.btn-catalog:hover,
.btn-consult:hover,
.single-btn:hover{
	color: #fff;
}
.btn-catalog,
.btn-consult{
	overflow: hidden;
}
.btn-catalog::before,
.btn-consult::before{
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	content: '';
	width: 120%;
	height: 100%;
	transform-origin: right top;
	transform: skewX(-30deg) scale(0, 1);
	transition: transform .3s;
}
.btn-catalog::before{ background: #007f9c;}
.btn-consult::before{ background: #017973;}

.btn-catalog:hover::before,
.btn-consult:hover::before{
	transform-origin: left top;
	transform: skewX(-30deg) scale(1, 1);
}

a.single-btn{
	display: inline-block;
	padding-left: 15px;
    padding-right: 15px;
    box-shadow: 0 0 6px grey;
}
.single-btn{
    position: relative;
    display: inline-block;
    padding: 0.6em 0;
    color: #FFF;
    font-size: 1.3em;
    text-align: center;
    text-decoration: none;
    transition: .3s;
    border-radius: 10px;
}
.single-btn{
	overflow: hidden;
}
.single-btn::before{
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	content: '';
	width: 120%;
	height: 100%;
	transform-origin: right top;
	transform: skewX(-30deg) scale(0, 1);
	transition: transform .3s;
}
.single-btn::before{ background: #96c135;}
.single-btn:hover::before{
	transform-origin: left top;
	transform: skewX(-30deg) scale(1, 1);
}

.dr-color{ background-color: #1a75ad;}
a.eigyousho-btn{
	display: inline-block;
	padding-left: 15px;
    padding-right: 15px;
    box-shadow: 0 0 6px grey;
}
.eigyousho-btn{
    position: relative;
    display: inline-block;
    padding: 0.6em 0;
    color: #FFF;
    font-size: 1.3em;
    text-align: center;
    text-decoration: none;
    transition: .3s;
    border-radius: 10px;
}
.eigyousho-btn{
	overflow: hidden;
}
.eigyousho-btn::before{
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	content: '';
	width: 120%;
	height: 100%;
	transform-origin: right top;
	transform: skewX(-30deg) scale(0, 1);
	transition: transform .3s;
}
.eigyousho-btn::before{ background: #4098d0;}
.eigyousho-btn:hover::before{
	transform-origin: left top;
	transform: skewX(-30deg) scale(1, 1);
}


@media print, screen and ( max-width : 600px ) {
	select{
		height: 35px;
		margin: 5px;
		font-size: 15px;
	}
	textarea {
		max-width: 300px;
		min-width: 250px;
	}
	input{
		height: 40px;
	}
	input[type="radio"]{
		        vertical-align: middle;
		font-size: x-large;
		height: 25px;
		width: 25px;
		margin: 5px;
	}
	input[type="checkbox"]{
		        vertical-align: middle;
		font-size: x-large;
		height: 25px;
		width: 25px;
		margin: 5px;
	}
	input[type="submit"]{
		padding: 15px 20px;
	}
	input.button {
		padding: 0;
	}
	.basic_form dt,
	.basic_form dd{
		display: block;
		width: 100%;
	}
	.textwidth{
		width: 100%;
		height: 90px;
	}
	.form-select-list li{
		float: none;
		width: 100%;
	}
	.form-area-btn ul {
		width: 100%;
		margin: 15px 0;
	}
	.form-area-btn ul li {
    float: none;
	width: 100%;
		padding: 1em .5em;
	}
}
/*  
-------------------------------------------------フロートボックス */
.flL {float:left;}
.flR {float: right;}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
.layout-box2-s:after,
.layout-box2-img:after{
	content:"";
	display: block;
	clear: both;
}
.layout-box2-s{
	max-width: 700px;
	margin: 0 auto;
}
.layout-box2-s div{
	float: left;
	width: 50%;
	text-align: center;
	padding: 0 10px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.layout-box2-img .img{
	float: left;
    width: 300px;
    text-align: center;
}
.layout-box2-img .txt{
	float: none;
    width: auto;
    margin-left: 300px;
    text-align: justify;
    text-justify: inter-ideograph;
}

@media print, screen and ( max-width : 834px ){
	.layout-box2-s div,
	.layout-box2-img .img{
	    float: none;
		width: 100%;
	}
	.layout-box2-img .txt{
		margin-left: 0;
	}
	.layout-box2-s div{
		text-align: center;
	}
}


/*  
-------------------------------------------------ローディング */
.loadingAnim{
    position: fixed;
    z-index: 100;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
}
.loadingAnim:before,
.loadingAnim:after{
    line-height: 1;
    position: fixed;
    z-index: 99;
    right: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 50%;
    margin-right: auto;
    margin-left: auto;
    content: ' ';
    transition: all .3s cubic-bezier(.785, .135, .15, .86) 0s;
    transition-delay: .3s;
    background-color: #efefef;
}
.loadingAnim:before{
    top: 0;
}
.loadingAnim:after{
    bottom: 0;
}
.loaded .loadingAnim:before{
    height: 0;
    -webkit-transform: translateY(-1%);
    -ms-transform: translateY(-1%);
    transform: translateY(-1%);
}
.loaded .loadingAnim:after{
    height: 0;
    -webkit-transform: translateY(1%);
    -ms-transform: translateY(1%);
    transform: translateY(1%);
}
.loadingAnim_line{
    line-height: 1;
    position: fixed;
    z-index: 100;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: inline-block;
    overflow: hidden;
    width: 150px;
    height: 1.6em;
    margin: auto;
    transition: all .3s cubic-bezier(.785, .135, .15, .86) 0s;
    transition-delay: .6s;
    text-align: center;
}
.loadingAnim_line:after{
    position: absolute;
    z-index: 100;
    top: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 0;
    height: 100%;
    margin: auto  auto auto 0;
    content:"" ;
    -webkit-animation: loadingAnim 2s ease-in-out .1s infinite normal backwards;
    animation: loadingAnim 2s ease-in-out .1s infinite normal backwards;
    background-color: #d1e8e2;
    will-change: transform, width;
}
.loadingAnim_line:before{
    font-family: 'Poppins', sans-serif;
    font-size: 1.25em;
    font-weight: bold;
    font-style: normal;
    line-height: 5;
    display: block;
    content: url(../images/logo.svg);
	height: 300px;
    -webkit-animation: loadingAnim_text 5s ease .1s infinite alternate both;
    animation: loadingAnim_text 1s ease .5s infinite alternate both;
    letter-spacing: .5em;
    will-change: opacity;
}
.loaded .loadingAnim_line{
    overflow: hidden;
    height: 0;
}
.loaded .loadingAnim_line:after,
.loaded .loadingAnim_line:before{
    -webkit-animation: none;
    animation: none;
}
.loaded .loadingAnim_line:before{
 content: '';
}

/*  
-------------------------------------------------flex box */
.dfac {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.dfjsb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.dfjcac {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.dfjsbaf {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.dfjsbas {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}
.dfjsbac {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.dfjsbab {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}

.dfas {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}

.dfjeac {
display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.dffwab {
display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
}
.fdr {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}

/*  
-------------------------------------------------google map */
.ggmap {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
.ggmap iframe,
.ggmap object,
.ggmap embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/*  
-------------------------------------------------IE11　ハック */
@media all and (-ms-high-contrast:none){
	/**::-ms-backdrop, p{
		font-family: "メイリオ", Meiryo, sans-serif !important;
	}*/
	*::-ms-backdrop, .sub-menu a.point{
		padding: 4px 8px 0 8px !important;
	}
	*::-ms-backdrop, .warning{
		padding: 4px 5px 0 5px !important;
	}
}


/*  
-------------------------------------------------印刷用 */
@media print{
  body{
    width: 1280px;
    -moz-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    transform-origin: 0 0;
  }
  .fadeinupDtoU, .fadeinupRtoL, .fadeinupLtoR, .fadeinupUtoD, .fadeinDtoU, .fadeinRtoL, .fadeinLtoR, .fadeinUtoD, .swiper-wrapper{ animation: none; -webkit-animation: none; opacity: 1; transform: none; transition: none!important;}
  body, .important-list, #mainslider{ background-color: #FFF!important;}
  header, .sitemap, footer, .pagetop, img.topimg-sp { display: none;}
}

/*  
-------------------------------------------------その他 */
.bdr {border: 1px solid #ccc;}