@charset "UTF-8";

/*	TOOL BOX
-------------------------------------------------------*/

/* For modern browsers */
.cf:before, .cf:after { content:""; display:table; }
.cf:after { clear:both; }

/* For IE 6/7 (trigger hasLayout) */
.cf { zoom:1; }
/* typography */
.error				{ border: 1px solid #fb4343; padding: 3px; color: #fb4343; }
.warning			{ border: 1px solid #d4ac0a; padding: 3px; color: #d4ac0a; }
.success			{ border: 1px solid #149b0d; padding: 3px; color: #149b0d; }
.callOut			{ font-size: 125%; font-weight: bold; }
.strikeOut			{ text-decoration: line-through; }
.underline			{ text-decoration: underline; }
.bold				{ font-weight:bold;}
.big                { font-size:1.2em; font-weight:bold; color:#666; }
.small              {
	font-size: 0.8em;
	color: #666;
}
.small2              {
	font-size: 0.8em;
	color: #FFF;
}
.fsmall             { font-size:0.8em; color:#fff; }
.fbig               { font-size: 1.2em; font-weight: bold; color: #fff; text-decoration: none; }

.kadomaru{
	-moz-border-radius: 70px;    /* 古いFirefox */
	-webkit-border-radius: 70px; /* 古いSafari,Chrome */
	border-radius: 70px;         /* CSS3 */
	background-color: #444444;   /* 背景色 */
	width:270px;
	font-size:12px;
	color:#FFFFFF;
	line-height:20px;
	text-align:center;
	margin:0 auto; 
} 

/* display */
.hide				{ display: none;}
.show				{ display: block;}
.invisible			{ visibility: hidden;}

.btn{
	display: inline-block;
	background-color: #cce5ff;/*背景色*/
	color: #666;/*文字色*/
	font-size: 0.8em;/*文字サイズ*/
	text-decoration: none;
	letter-spacing: 0.05em;/*字間*/
	padding: 0.2em 1em;/*ボタン内の余白*/
	border-radius: 3px;/*角の丸み*/
	cursor: pointer;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);/*影*/
	-webkit-tap-highlight-color: transparent;
	transition: .3s ease-out;/*変化を緩やかに*/
	max-width: 336px;
	width: 100%;
	line-height: 40px;	
}
.btn:hover{
    box-shadow: 0 3px 3px 0 rgba(0,0,0,0.14), 0 1px 7px 0 rgba(0,0,0,0.12), 0 3px 1px -1px rgba(0,0,0,0.2);/*浮き上がるように*/
}

.btn2{
	display: inline-block;
	background-color: #999;/*背景色*/
	color: #FFF;/*文字色*/
	font-size: 0.8em;/*文字サイズ*/
	text-decoration: none;
	letter-spacing: 0.05em;/*字間*/
	padding: 0.2em 1em;/*ボタン内の余白*/
	border-radius: 3px;/*角の丸み*/
	cursor: pointer;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);/*影*/
	-webkit-tap-highlight-color: transparent;
	transition: .3s ease-out;/*変化を緩やかに*/
	width: 100%;
	line-height: 40px;
}
.btn2:hover{
    box-shadow: 0 3px 3px 0 rgba(0,0,0,0.14), 0 1px 7px 0 rgba(0,0,0,0.12), 0 3px 1px -1px rgba(0,0,0,0.2);/*浮き上がるように*/
}

.btn3{
	display: inline-block;
	background-color: #3399CC;/*背景色*/
	color: #FFF;/*文字色*/
	font-size: 0.8em;/*文字サイズ*/
	text-decoration: none;
	letter-spacing: 0.05em;/*字間*/
	padding: 0.2em 1em;/*ボタン内の余白*/
	border-radius: 3px;/*角の丸み*/
	cursor: pointer;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);/*影*/
	-webkit-tap-highlight-color: transparent;
	transition: .3s ease-out;/*変化を緩やかに*/
	max-width: 280px;
	width: 100%;
	line-height: 40px;
}
.btn3:hover{
    box-shadow: 0 3px 3px 0 rgba(0,0,0,0.14), 0 1px 7px 0 rgba(0,0,0,0.12), 0 3px 1px -1px rgba(0,0,0,0.2);/*浮き上がるように*/
}

.btn4{
	display: inline-block;
	background-color: #993;/*背景色*/
	color: #FFF;/*文字色*/
	font-size: 1.2em;/*文字サイズ*/
	font-weight:bold;
	text-decoration: none;
	letter-spacing: 0.05em;/*字間*/
	padding: 0.2em 1em;/*ボタン内の余白*/
	border-radius: 3px;/*角の丸み*/
	cursor: pointer;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);/*影*/
	-webkit-tap-highlight-color: transparent;
	transition: .3s ease-out;/*変化を緩やかに*/
	width: 80%;
	line-height: 60px;
}
.btn4:hover{
    box-shadow: 0 3px 3px 0 rgba(0,0,0,0.14), 0 1px 7px 0 rgba(0,0,0,0.12), 0 3px 1px -1px rgba(0,0,0,0.2);/*浮き上がるように*/
}

/* layout */
.float-left-img		{ float: none; margin:auto; display:block; max-width:95%; width:100%; }
.float-right-img	{ float: none; margin:auto; display:block; max-width:95%; width:100%; }
.clear				{ clear: both; }
.layout-center		{ margin: 0 auto; }
.txt-center			{ text-align: center; }
.txt-right			{ text-align: right; }
.txt-left			{ text-align: left; }

/* space */
.space-20px { display:block; width:100%; height:20px}
.space-40px { display:block; width:100%; height:40px}
.space-60px { display:block; width:100%; height:60px}

/*yoyakubt*/
#yoyakubt{
	width: 72px;
	height: 72px;
	display: none;
	position: fixed;
	right: 16px;
	bottom: 16px;
}
#yoyakubt p{
	margin:0;
	padding:0;
	text-align:center;
	-webkit-transition:all 0.3s;
	-moz-transition:all 0.3s;
	transition:all 0.3s;
}
#yoyakubt p:hover{
	opacity: 0.50; /* 25％ほど透明にする */
}
#move-yoyakubt{
	line-height:72px;
	display:block;
	cursor:pointer;
}
/*ページTOPに戻る指定ここまで*/

/*menubt*/
#menubt{
	width: 72px;
	height: 72px;
	display: none;
	position: fixed;
	right: 0px;
	top: 16px;
}
#menubt p{
	margin:0;
	padding:0;
	text-align:center;
	-webkit-transition:all 0.3s;
	-moz-transition:all 0.3s;
	transition:all 0.3s;
}
#menubt p:hover{
	opacity: 0.50; /* 25％ほど透明にする */
}
#move-menubt{
	line-height:72px;
	display:block;
	cursor:pointer;
}
/*ページTOPに戻る指定ここまで*/



/*ボックス全体*/
.accbox {
	margin: 2em 0;
	padding: 20px;
	max-width: 100%;/*最大幅*/
	border: 1px solid #777;
	background-color: #FFF;
}

/*ラベル*/
.accbox label {
	position: relative;
	display: inline-block;
	padding: 0.25em 0.5em;
	text-decoration: none;
	color: #777;
	background: #f2f2f2;/*背景色*/
	border-bottom: solid 2px #999;/*少し濃い目の色に*/
	border-radius: 4px;/*角の丸み*/
	box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
	width: 100%;
	line-height: 50px;
	margin-bottom: 5px;
}
/*ラベルホバー時*/
.accbox label:hover {
	border-bottom: solid 2px #f555;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}

/*チェックは隠す*/
.accbox input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.cssacc:checked + .accshow {
	height: auto;
	padding: 20px;
	background: #eaeaea;
	opacity: 1;
}



/*ハンバーガーmenu*/

#nav-drawer {
  position: relative;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 43px;
  height: 70px;
  background-image:url(../img/yoyakubt.webp);
  vertical-align: middle;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  background-image:url(../img/yoyakubt.webp);
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;/*最前面に*/
  width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 330px;/*最大幅（調整してください）*/
  height: 100%;
  background: #333;/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}




/*シェアボタン*/

@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icomoon.eot?ookgoz');
	src:url('../fonts/icomoon.eot?ookgoz#iefix') format('embedded-opentype'),
		url('../fonts/icomoon.ttf?ookgoz') format('truetype'),
		url('../fonts/icomoon.woff?ookgoz') format('woff'),
		url('../fonts/icomoon.svg?ookgoz#icomoon') format('svg');
		font-weight: normal;
		font-style: normal;
	font-display: swap;
}

[class^="icon-"], [class*=" icon-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'icomoon' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: inherit;
	
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-line:before        {content: "\e90a";}
.icon-feedly:before      {content: "\e900";}
.icon-pocket:before      {content: "\e902";}
.icon-instagram:before   {content: "\ea92";}
.icon-twitter:before     {content: "\ea96";}
.icon-youtube:before     {content: "\ea9d";}
.icon-google:before      {content: "\ea88";}
.icon-google2:before     {content: "\ea89";}
.icon-google-plus:before {content: "\ea8b";}
.icon-google-plus2:before{content: "\ea8c";}
.icon-facebook:before    {content: "\ea90";}
.icon-facebook2:before   {content: "\ea91";}
.icon-linkedin:before    {content: "\eaca";}
.icon-linkedin2:before   {content: "\eac9";}
.icon-pinterest:before   {content: "\ead2";}
.icon-pinterest2:before  {content: "\ead1";}
.icon-hatebu:before      {content: "\e903";}
.icon-hatebu2:before     {content: "\e901";}
.icon-rss:before         {content: "\ea9b";}
.icon-rss2:before        {content: "\ea9c";}




.shareList {
	list-style:none;
	display: flex;
	justify-content: center;
  align-items: center;
	flex-wrap:wrap;
	margin:0 auto;
	padding:0;
}
.shareList__item {
	height:28px;
	line-height:28px;
	margin:0 0 0 5px;
	text-align:center;
}
.shareList__link {
	display:block;
	padding:0 10px;
	color:#ffffff;
	text-decoration: none;
	border-radius: 5px;
}
.shareList__link::before{
	font-size:14px;
	transition: ease-in-out .2s;
	border-radius: 5px;
}
.shareList__link::after{
	content:attr(title);
	font-size:12px;
	vertical-align: top;
	margin-left:5px;
}
.shareList__link:hover{opacity: 0.75;}
 
.shareList__link.icon-twitter{background:#55acee;}
 
.shareList__link.icon-facebook{background:#3B5998;}
 
.shareList__link.icon-hatebu{background:#008FDE;}

.shareList__link.icon-line{background:#1dcd00;}






.shareList2 {
	list-style:none;
	width:100%;
	margin:0 auto;
	padding:0;
}
.shareList2__item {
	height:40px;
	line-height:40px;
	margin:5px 0 0 5px;
	text-align:center;
}
.shareList2__link {
	display:block;
	padding:0 10px;
	color:#ffffff;
	text-decoration: none;
	border-radius: 5px;
}
.shareList2__link::before{
	font-size:14px;
	transition: ease-in-out .2s;
	border-radius: 5px;
}
.shareList2__link::after{
	content:attr(title);
	font-size:12px;
	vertical-align: top;
	margin-left:5px;
}
.shareList2__link:hover{opacity: 0.75;}
 
.shareList2__link.icon-twitter{background:#55acee;}
 
.shareList2__link.icon-facebook{background:#3B5998;}
 
.shareList2__link.icon-hatebu{background:#008FDE;}

.shareList2__link.icon-line{background:#1dcd00;}

.ip {
	padding: 5px 50px;
	text-align:center;
	
}



@media screen and (min-width : 960px) { /* デスクトップ用CSS */
	
	.float-left-img {
		float: left;
		margin-right: 20px;
		display: block;
		max-width: 336px;
		width: 100%;
	}
	.float-right-img {
		float: right;
		margin-left: 20px;
		display: block;
		max-width: 336px;
		width: 100%;
	} 

	.clear			{ clear: both; }
	.layout-center	{ margin: 0 auto; }
	.txt-center		{ text-align: center; }
	.txt-right		{ text-align: right; }
	.txt-left		{ text-align: left; }
	.txt-lg-left		{ text-align: left; }
	
	.ip { padding:0px
}

}

.midashi {
	background-color: #f0f8ff;
	padding: 20px;
	background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #F9F9F9), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #F9F9F9),color-stop(.75, #F9F9F9), color-stop(.75, transparent),to(transparent));
	-webkit-background-size: 7px 7px;
}


.fadein {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

/* --------- common --------- */
.tiles div{text-align: center;}
.mgb-20{margin-bottom: 20px;}
.cicle-img{
	border-radius: 50%;
}
/* --------- header - main-img - menu --------- */
.headline{
	background-color: #000;
	width: 100%;
	color: #CCC;
	font-size: 12px;
	margin-bottom: 0px;
}
.headline_content{
	margin: 0 auto;
	width: 100%;
	max-width: 1180px;
	text-align: left;
}

/* --------- footer --------- */
footer article, footer > div:first-child{
	padding: 1em;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.close-btn{
	background-color: #fff;
	border-radius: 30px;
	padding-left: 1rem;
	padding-right: 1rem;
	margin-top: 1rem;
	margin-bottom: 2rem;
	width: 85%;
}

#nav-content .btn, #nav-content .btn3{
	font-size: 0.9rem;
}


/* ■■■■■■■■■ SP用 ■■■■■■■■■ */
@media screen and (max-width : 959px) {
	
	/* --------- Common --------- */
	.accbox label{line-height: 1.8em; padding-top: 1em; padding-bottom: .8em;}

	/* --------- header - main-img - menu --------- */
	.gnav{margin-top:-30px; margin-bottom: -5px;}
	.gnav span.fbig a{color: #FFF;}
	.gnav span.big a{color: #666;}
	.pankuzu li{line-height: 1em;}
	.main-nav-home-btn{margin: 15px auto 10px;}
	.sidebar-picup-img{min-width: 230px;}
	.headline_content{padding:0px 10px;}

	/* --------- footer --------- */
	footer article, footer > div:first-child{margin-bottom: 20px; padding: .3em;}
	.pc_footer{display: none;}
	.sp_footer{display: inline;}
	
	.mt-sm-3{margin-top: 1rem;}


}


/* ■■■■■■■■■ PC用 ■■■■■■■■■ */
@media screen and (min-width : 960px) {

	/* --------- footer --------- */
	footer article, footer > div:first-child{
		margin:0 auto;
		padding:0;
		max-width:1000px;
		flex-direction: row;
	}
	.pc_footer{display: inline;}
	.sp_footer{display: none;}
}


.border{border: 1px #000 solid;}
.btn5-box{
	margin-bottom: 3rem;
	max-width: 280px;
	margin-left: auto;
	margin-right: auto;
}
.btn5{
	display: block;
	background-color: #a9925f;/*背景色c6c6c6*/
	color: #FFF;/*文字色*/
	font-size: 0.9em;/*文字サイズ*/
	text-decoration: none;
	letter-spacing: 0.05em;/*字間*/
	padding: 0.2em 1em;/*ボタン内の余白*/
	border-radius: 3px;/*角の丸み*/
	cursor: pointer;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);/*影*/
	-webkit-tap-highlight-color: transparent;
	transition: .3s ease-out;/*変化を緩やかに*/
	width: 100%;
	height: 100%;
	line-height: 40px;
}
.btn5:hover{
    box-shadow: 0 3px 3px 0 rgba(0,0,0,0.14), 0 1px 7px 0 rgba(0,0,0,0.12), 0 3px 1px -1px rgba(0,0,0,0.2);/*浮き上がるように*/
}
.btn6{
	background-color: #ff9933;
	color: #fff;
	font-weight: bold;
}
#humberger {
  position: relative;
  height: 24px;
  width: 24px;
  display: inline-block;
  box-sizing: border-box;
  top: 7px;
}
#humberger div {
  position: absolute;
  left: 0;
  height: 4px;
  width: 24px;
  background-color: #fff;
  border-radius: 2px;
  display: inline-block;
  box-sizing: border-box;
}
#humberger div:nth-of-type(1) {
  top: 0px;
}
#humberger div:nth-of-type(2) {
  top: 10px;
}
#humberger div:nth-of-type(3) {
  bottom: 0;
}