@charset "utf-8";

/* 共通設定 */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
ins{background-color:#ff9;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}

@font-face {
	font-family: fontello;
	src: url(../font/fontello.eot?25462111#iefix) format("embedded-opentype"), url(../font/fontello.woff?25462111) format("woff"), url(../font/fontello.ttf?25462111) format("truetype"), url(../font/fontello.svg?25462111#fontello) format("svg");
	font-weight: normal;
	font-style: normal;
}

/* レスポンシブルで画像縮小ボケを解消 */
img{ 
-webkit-backface-visibility: hidden;
}

.clear{
	clear: both;
}

/* 非表示 */
.none{
	display:none;
}
/* クリックで小窓表示cssで色が変わらなくなるバグ対策 inputにclassを追加 */
input.button {
	cursor: pointer;
	background-image: linear-gradient(0deg, #d0d0d0, #eeeeee);
	border: 1px solid #999999;
}
input.button:hover {
	cursor: pointer;
	background-image: linear-gradient(0deg, #68d3db, #e5f4fc);
	border: 1px solid #2c628b;
}

.hr {border-top: 1px #cccccc solid;}

img {
	margin: 0;
	padding: 0;
	vertical-align: bottom;
}
.imgmax600 {max-width: 600px;}
.imgmax800 {max-width: 800px;}
.imghover a:hover img {opacity:0.70;}

.img-resp{
	max-width: 100%;
	height: auto;
}
.imgmaxh200 {max-height: 200px;}

.bg-hover-w :hover{
	background-color:rgba(0,0,0,0.0);
}

/* Youtubeレスポンシブル*/
.youtube {
  aspect-ratio: 16/9;
  overflow: hidden;
  transform: translateY(0px);
}
.youtube iframe {
    width: 100%;
    height: 100%;
    vertical-align: bottom;//隙間対策
}
/* Youtubeレスポンシブル 角丸*/
.youtube-r {
  aspect-ratio: 16/9;
  border-radius: 5px;
  overflow: hidden;
  transform: translateY(0px);
}
.youtube-r iframe {
    width: 100%;
    height: 100%;
    vertical-align: bottom;//隙間対策
}
/* Youtubeレスポンシブル 旧*/
.old-youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.old-youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

/* 画像フェードインアウト */
.wow:first-child {
	visibility: hidden;
}


html {
	margin: 0px;
	padding: 0px;
	font-size: 100%;
	min-height: 100%;
	position: relative;
}

body {
	margin: 0px;
	padding: 0px;
	text-align: left;
/*	line-height: 1; -webkit-text-size-adjust: none;*/
}

.main {
/*	PC・SP設定有 */
}

.main-left-menu {
/*	PC設定有 */
	width: 260px;
	float: left;
	overflow: hidden;
/*	height:100vh;*/
/*	border: 0px #f60 solid;*/
/*	box-sizing: border-box;*/
/*	background-color: #f0f0f0;*/
}

@media only screen and (max-width: 1270px){ /*	PCメニュー非表示 ヘッダバーガーメニューのアクションに合わせる */
	.main-left-menu{display: none;}
}

.main-contents {
	border: 0px #eee solid; /* ------------------------------------確認用------------------------------------------- */
/*	PC・SP設定有 */
	box-sizing: border-box;
	overflow: hidden;
}
@media only screen and (min-width: 1270px){ /*	PCメニュー非表示 ヘッダバーガーメニューのアクションに合わせる */
	.main-contents{
	padding: 0px 20px;
/*	float: right;*/
/*	width: calc(100% - 262px); */
	width: 100%;
	}
}

.main-noimg{
/*	PC・SP設定有 */
}


/* コンテンツ */

.contents-box-all {
	border: 0px #eeeeee solid; /* ------------------------------------確認用------------------------------------------- */
	margin: 0px auto;
	overflow: hidden;
@media only screen and (min-height: 1100px){max-width: 1260px}
@media only screen and (max-height: 1100px){max-width: 1000px}/* ノートPC用 */
@media only screen and (min-width: 480px){padding: 100px 40px; line-height: 180%;}
@media only screen and (max-width: 480px){padding: 60px 20px; line-height: 140%;}
}


.contents-box-img {
	border: 0px #eeeeee solid; /* ------------------------------------確認用------------------------------------------- */
	margin: 0px auto;
	overflow: hidden;
@media only screen and (min-height: 1100px){max-width: 1260px}
@media only screen and (max-height: 1100px){max-width: 1000px}/* ノートPC用 */
@media only screen and (min-width: 600px){padding: 50px 40px 0px;}
@media only screen and (max-width: 600px){padding: 20px 20px 0px;}
}






.contents-box-max { /* 部分的 最大幅 TOPスライドなど */
@media only screen and (min-width: 480px){padding: 0px 10px 120px; line-height: 180% !important;}
@media only screen and (max-width: 480px){padding: 0px 10px 60px; line-height: 140% !important;}
}

.contents-box-w80 {
	border: 0px #eeeeee solid; /* ------------------------------------確認用------------------------------------------- */
	margin: 0px auto;
	overflow: hidden;
@media only screen and (min-height: 1100px){max-width: 1000px}
@media only screen and (max-height: 1100px){max-width: 800px}/* ノートPC用 */
@media only screen and (min-width: 480px){padding: 120px 40px; line-height: 180%;}
@media only screen and (max-width: 480px){padding: 60px 20px; line-height: 140%;}
}

.contents-box-w60 {
	border: 0px #eeeeee solid; /* ------------------------------------確認用------------------------------------------- */
	margin: 0px auto;
	overflow: hidden;
@media only screen and (min-height: 1100px){max-width: 800px}
@media only screen and (max-height: 1100px){max-width: 800px}/* ノートPC用 */
@media only screen and (min-width: 480px){padding: 120px 40px; line-height: 180%;}
@media only screen and (max-width: 480px){padding: 60px 20px; line-height: 140%;}
}


.w60 {
	width: 60%;
}
.w80 {
	width: 80%;
}
/* ナビ */
.main-navi {
	margin: 0px auto 20px;
	text-align: center;
	display: block;
	overflow: hidden;
/*	border-bottom: 1px #aaa solid;*/
@media only screen and (min-width: 480px){ font-size: 14px;}
@media only screen and (max-width: 480px){ font-size: 12px;}
}
.main-navi a{
@media only screen and (min-width: 480px){ padding: 10px 0px;}
@media only screen and (max-width: 480px){ padding: 8px 0px;}
	color: #fff !important;
	background-color: #5f5b59;
	display: block;
	box-sizing: border-box;
	overflow: hidden;
/*	border-top: 2px #eee solid;
	border-left: 2px #eee solid;
	border-right: 2px #bbb solid;
	border-bottom: 2px #bbb solid;*/
	border-radius: 5px;
}
.main-navi a:hover{
	color: #fff;
	background-color: #8f8b89;
	display: block;
	box-sizing: border-box;
	overflow: hidden;
/*	border-top: 2px #ddd solid;
	border-left: 2px #ddd solid;
	border-right: 2px #f0f0f0 solid;
	border-bottom: 2px #f0f0f0 solid;*/
	border-radius: 5px;
}

/* ナビ */
.main-navi-s {
	max-width: 180px;
	margin: 0px auto 20px;
	text-align: center;
	display: block;
	overflow: hidden;
/*	border-bottom: 1px #aaa solid;*/
@media only screen and (min-width: 480px){ font-size: 14px;}
@media only screen and (max-width: 480px){ font-size: 12px;}
}
.main-navi-s a{
@media only screen and (min-width: 480px){ padding: 10px 0px;}
@media only screen and (max-width: 480px){ padding: 8px 0px;}
	color: #fff !important;
	background-color: #5f5b59;
	display: block;
	box-sizing: border-box;
	overflow: hidden;
/*	border-top: 2px #eee solid;
	border-left: 2px #eee solid;
	border-right: 2px #bbb solid;
	border-bottom: 2px #bbb solid;*/
	border-radius: 5px;
}
.main-navi-s a:hover{
	color: #fff;
	background-color: #8f8b89;
	display: block;
	box-sizing: border-box;
	overflow: hidden;
/*	border-top: 2px #ddd solid;
	border-left: 2px #ddd solid;
	border-right: 2px #f0f0f0 solid;
	border-bottom: 2px #f0f0f0 solid;*/
	border-radius: 5px;
}

.main-navi-m {
	max-width: 260px;
	margin: 0px auto 20px;
	text-align: center;
	display: block;
	overflow: hidden;
/*	border-bottom: 1px #aaa solid;*/
@media only screen and (min-width: 480px){ font-size: 14px;}
@media only screen and (max-width: 480px){ font-size: 12px;}
}
.main-navi-m a{
@media only screen and (min-width: 480px){ padding: 10px 0px;}
@media only screen and (max-width: 480px){ padding: 6px 0px;}
	color: #fff !important;
	background-color: #5f5b59;
	display: block;
	box-sizing: border-box;
	overflow: hidden;
/*	border-top: 2px #eee solid;
	border-left: 2px #eee solid;
	border-right: 2px #bbb solid;
	border-bottom: 2px #bbb solid;*/
	border-radius: 5px;
}
.main-navi-m a:hover{
	color: #fff;
	background-color: #8f8b89;
	display: block;
	box-sizing: border-box;
	overflow: hidden;
/*	border-top: 2px #ddd solid;
	border-left: 2px #ddd solid;
	border-right: 2px #f0f0f0 solid;
	border-bottom: 2px #f0f0f0 solid;*/
	border-radius: 5px;
}

/* ページTOPへ */
.clearfix {
	display:block;
	clear:both;
	overflow:hidden;
}
.float-L {
	float:left;
}
.float-R {
	float:right;
}
.page_top {
	right: 5px;
	position:fixed;
	bottom: 0px;
	z-index:10000;
	border: 0px #cccccc solid;

@media only screen and (min-width: 480px){
	margin-bottom: 37px;
	margin-right: 15px;
/*	margin-bottom: 60px; LINEなし*/
/*	margin-right: 20px; LINEなし*/
	}

@media only screen and (max-width: 480px){
	margin-bottom: 45px;
	}
}


/* フッター */
/* フッター最下部固定 */
footer {
	margin: 0px;
	padding: 0px;
	bottom: 0px;
/* 	position: absolute; */
	overflow: hidden;
	border: 0px #aaa solid;
	background-color: #f0f0f0;
}
footer a {
	text-decoration: none;
	color: #444;
}
footer a:link{
	color: #444;
}
footer a:visited{
	color: #444;
}
footer a:hover{
	color: #aa8800;
}

.footer-logo-area{ /* PC・SP設定有 */
	overflow: hidden;
	border: 0px #cccccc solid;
}
.footer-copy-area { /* PC・SP設定有 */
	overflow: hidden;
	border: 0px #00cc00 solid;
}



/*	レスポンシブ <a>を使わない時 */
.h-rres{
/*	margin: 2px 5px 2px 0px;*/
	padding: 3px 16px 5px;
	line-height: 140%;
	text-align: center;
	background-color: #f1eee3;
	border-radius: 30px;
	display: inline-block;
}

/*	レスポンシブ <a>を使う時  */
.h-rres-a{
	margin: 0px 0px 0px 0px;
	line-height: 140%;
	text-align: center;
	background-color: #f1eee3;
	border-radius: 30px;
	display: inline-block;
}
.h-rres-a a{
	padding: 3px 16px 5px;
	color: #444444;
	border-radius: 30px;
	display: block;
}
.h-rres-a a:hover{
	color: #444444;
	background-color: #f0dd99;
	display: block;
}
.h-rres-swide a{
	padding-left: 20px !important;
	padding-right: 20px !important;
}


.pageback{
	width: 100%;
	text-align: center;
	border: 0px #cccccc solid;
}
.pageback input{
	padding: 16px 30px;
}
@media only screen and (min-width: 480px){.pageback input {
	font-size: 15px;
	padding: 16px 30px;
}}
@media only screen and (max-width: 480px){.pageback input {
	font-size: 13px;
	padding: 10px 20px;
}}

.sendback{
	width: 100%;
	text-align: center;
	border: 0px #cccccc solid;
}
.sendback p.l{
	text-align: center;
	width: 50%;
	float: left;
	overflow: hidden;
	border: 0px #cccccc dotted;
}
.sendback p.r{
	text-align: center;
	width: 50%;
	float: right;
	overflow: hidden;
	border: 0px #cccccc dotted;
}
.sendback input{
	border-radius: 5px;
	color: #333;
/*	color: #0b62e5;*/
	font-weight: 400;
}
@media only screen and (min-width: 480px){.sendback input {
/*	font-size: 15px;*/
	padding: 16px 30px;
}}
@media only screen and (max-width: 480px){.sendback input {
/*	font-size: 13px;*/
	padding: 10px 20px;
}}



/* クリックでオープン*/
.hidden_box {
	padding: 3px 5px 3px;
	overflow: hidden;
}
.hidden_box label {
	padding: 5px 10px;
	background: #f0f0f0;
	border-radius: 5px;
	cursor :pointer;
	box-sizing: border-box;
	font-size: 14px;
}
/*ボタンホバー時*/
.hidden_box label:hover {
	background: #f0f0e0;
}
/*チェックは見えなくする*/
.hidden_box input {
    display: none;
}
/*中身を非表示にしておく*/
.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}
/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
    height: auto;
    opacity: 1;
}

.hidden_box .hidden_show img{
	box-sizing: border-box;
	padding: 0px 10px 0px;
	margin-bottom: 10px;
}