@charset "utf-8";
/***************************
MADE BY JOHOSTATION co., ltd.
***************************/

@import url('https://fonts.googleapis.com/earlyaccess/notosansjp.css');
@import url('https://use.fontawesome.com/releases/v5.9.0/css/all.css');
@import url('https://fonts.googleapis.com/earlyaccess/notosansjapanese.css');
@import url('https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c');
@import url('https://fonts.googleapis.com/css?family=M+PLUS+1p');
@import url('https://fonts.googleapis.com/css?family=Sawarabi+Mincho');
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP');
@import url('https://fonts.googleapis.com/css?family=Kosugi+Maru');
@import url('https://fonts.googleapis.com/earlyaccess/kokoro.css');
@import url('https://fonts.googleapis.com/earlyaccess/hannari.css');

body 
{font-family:'Noto Sans Japanese','游ゴシック体', 'Yu Gothic', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3',' Meiryo', 'メイリオ', 'Osaka', 'MS PGothic', 'arial', 'helvetica','sans-serif' !important;}

img
{border:none;
  width:100%;
  height:auto;
  vertical-align:inherit}

img.img01
{display:block;
  margin:0px 0px 10px}

img.ibjno1
{width:200px;
  display:inline-block;
  float:right;
  margin:0px 0px 20px 20px}

br.brsp
{display:none !important}

.block
{display:block}

.block05
{display:block;
  margin:5px 0px}

.mode_pc
{display:inherit !important}

.mode_sp
{display:none !important}

/*タグ関連*/

p
{margin:0px;}

p.p13
{font-size:13px;
  line-height:1.6em;}

p.pmar
{margin-bottom:15px}

p.pimg
{overflow:visible}

p.pimg2
{overflow:auto}

strong.strb
{background: linear-gradient(transparent 50%, #def 50%);}

strong.strb2
{background-color:#def;}

strong.stry
{background: linear-gradient(transparent 50%, #ff9 50%);}

strong.stry2
{background-color:#ff9}

strong.strg
{background: linear-gradient(transparent 50%, #ded 50%);}

strong.strr
{background: linear-gradient(transparent 50%, #fdd 50%);}

strong.strr2
{background-color:#fdd}

span.attension
{margin-top:8px;
  display:block;
  font-size:13px;
  line-height:1.3em;}

.red
{color:#e22 !important}

br.br10
{margin-bottom:10px;
  display:block;
  content: "";}

br.br15
{margin-bottom:15px;
  display:block;
  content: "";}

.bnr_campaign
{margin:30px auto 30px;
  text-align:center;
  max-width:600px}

/*ブログ関連*/

/*回り込み関連*/
.clear    {float:none; clear:both;height:0px;overflow:hidden;margin:0px}
.clear img{width:0px;height:0px}
.f-left    {float:left;text-align:justify;text-justify:inter-ideograph}
.f-left10 {float:left;text-align:justify;text-justify:inter-ideograph;margin-left:10px}
.f-right  {float:right;text-align:justify;text-justify:inter-ideograph}
	
/*配置関連*/
.left        {text-align:left !important}
.center   {text-align:center !important;margin:0px auto}
.right      {text-align:right}

/*記入モード*/
.i-japan    {ime-mode:active}
.i-english  {ime-mode:disabled}
#i-english  {ime-mode:disabled}
.required email  {ime-mode:disabled}

/* ページャー */

.page-nav 
{text-align:center;
  font-weight:bold;
  margin:30px 0;
  font-size:10pt}
  
.page-nav li 
{display:inline;}

.page-nav li a:link,.page-nav li a:visited
{border: 1px solid #1b69c1;
  color:#1b69c1;
  border-radius:10px;
  text-decoration:none}
  
.page-nav li a:hover
{border: 1px solid #cccccc;
  color:#cccccc;
  border-radius:10px;
  text-decoration:none}
	
.page-nav li a:active {top:1px;}/*push image*/

.page-nav li.current span
{border: 1px solid #dddddd;
  color:#dddddd;
  border-radius:10px;
  text-decoration:none}
  
.page-nav li.first span,
.page-nav li.previous span,
.page-nav li.next span,
.page-nav li.last span,
.page-nav li.page_nums span
{border: 1px solid #dddddd;
  color:#dddddd;
  border-radius:10px;
  text-decoration:none}
.page-nav li a,
.page-nav li.current span,
.page-nav li.first span,
.page-nav li.previous span,
.page-nav li.after span,
.page-nav li.next span,
.page-nav li.last span,
.page-nav li.page_nums span {
    padding: 0.5em 0.8em;
    position:relative;}

/*リスト関連*/

ul
{list-style-type:none;
	margin:0px 0px 0px 0px;
	padding:0px;
  text-align:justify;
	text-justify:inter-ideograph}

ol
{list-style-type:none;
	margin:0px 0px 0px 0px;
	padding:0px;
  text-align:justify;
	text-justify:inter-ideograph}

/*定義関連*/

.relative
{position:relative}

dl
{margin:0px;
 padding:0px}

dt 
{margin:0px;
 padding:0px}

dd
{margin:0px;
 padding:0px 0px 0px 0px}

a.img_on img
{-webkit-transition: 0.3s ease-in-out;  
	transition: 0.3s ease-in-out;}

a.img_on:hover img{
    cursor:pointer;
    filter: alpha(opacity=60);        /* ie lt 8 */
    -ms-filter: "alpha(opacity=60)";  /* ie 8 */
    -moz-opacity:0.6;                 /* FF lt 1.5, Netscape */
    -khtml-opacity: 0.6;              /* Safari 1.x */
    opacity:0.6;
    zoom:1;}

input:hover.img_on
{position:relative;
  top:1px;
	left:1px;
	opacity:0.6;
	filter: alpha(opacity=60);	/* IE6、IE7対応 */
 -moz-opacity: 0.6;		/* Firefox1.5以前対応 */}

img:hover.img_on2
{position:relative;
  top:1px;
	left:1px;}

a:hover.img_on2
{position:relative;
  top:1px;
	left:1px;}

/*装飾系*/
.ribbon4 {
    display: inline-block;
    position: relative;
    height: 30px;/*高さ*/
    line-height: 30px;/*高さ*/
    vertical-align: middle;
    padding: 0 40px 0 18px;/*文字の左右の余白*/
    background: #6cf;/*背景色*/
    color: #fff !important;/*文字色*/
    box-sizing: border-box;
	font-weight:700}

.ribbon4:after {
    position: absolute;
    content: '';
    width: 0px;
    height: 0px;
    z-index: 1;
}

.ribbon4:after {
    top: 0;
    right: 0;
    border-width: 15px 15px 15px 0px;
    border-color: transparent #fff transparent transparent;
    border-style: solid;
}

/*全体をリンク*/

a.wa
{background-color: rgba(255,255,255,0.0);
  -webkit-transition: 0.3s ease-in-out;  
	transition: 0.3s ease-in-out;
	display:block;
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0%;
	font-size:0px}

a.wa:hover
{background-color: rgba(255,255,255,0.5);}

a.wa2
{background-color: rgba(0,0,0,0.0);
  -webkit-transition: 0.3s ease-in-out;  
	transition: 0.3s ease-in-out;
	display:block;
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0%;
	font-size:0px}

a.wa2:hover
{background-color: rgba(0,0,0,0.2);}


/*続きを読むボタン*/

.accordion-box {
    position: relative;
}
.accordion-box label {
    height: 100px; /* グラデーションの高さ */
    cursor: pointer;
    text-align: center;
    font-size: 12px;
    position: absolute;
    bottom: 0;
    width: 100%;
	z-index:2;
    /* 以下グラデーションは「背景が白」に併せて設定しています */ 
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 90%);
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 90%);
    background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 90%);
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 90%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 90%);
}
.accordion-box input:checked + label {
    background: inherit; /* 開いた時には背景グラデーションを消す */
}
.accordion-box label:after {
    content: "続きをよむ"; /* ラベルの文字 */
    letter-spacing: .05em;
    line-height: 2.5rem;
    position: absolute;
    bottom: 20px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    color: #fff;
    background-color: #000;
	opacity:0.7;
    width: 18.75rem;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}
.accordion-box label:before {
    content: "↓";
    font-weight: 700;
    position: absolute;
    bottom: 30px;
    left: 50%;
    -webkit-transform: translate(-140px, 0);
    transform: translate(-140px, 0);
    background-color: #fff;
    z-index: 1;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    width: 20px;
    height: 20px;
    line-height: 20px;
}
.accordion-box input {
    display: none;
}
.accordion-box .accordion-container {
    overflow: hidden;
    height: 200px; /* 開く前に見えている部分の高さ */
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}


.accordion-box input:checked + label {
    /* display: none ; 閉じるボタンは要らないとき */
}
.accordion-box input:checked + label:after {
    content: "閉じる";
}
.accordion-box input:checked + label:before {
    content: "↑";
}
.accordion-box input:checked ~ .accordion-container {
    height: auto;
    padding-bottom: 80px; /* 閉じるボタンのbottomからの位置 */
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

 /* タイトル装飾の括弧 */
.brackets:before,.brackets:after{ 
  position: absolute;
  top: 0;
  content:'';
width: 8px;
height: 100%;
display: inline-block;
}
.brackets:before{
border-left: solid 1px black;
border-top: solid 1px black;
border-bottom: solid 1px black;
  left: 0;
}
.brackets:after{
  content: '';
  border-top: solid 1px black;
  border-right: solid 1px black;
  border-bottom: solid 1px black;
  right: 0;
}

.brackets_white:before,.brackets_white:after
{border-color:white !important}

.diagonal:before, .diagonal:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 44px;
  height: 1px;
  background-color:#333;
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
}
.diagonal:before {
  left:0;
}
.diagonal:after {
  right: 0;
}

 /* ボーダーの装飾 */
.box01{
    margin:2em 0;
    position: relative;
    padding: 0.5em 1.5em;
    border-top: solid 1px #666;
    border-bottom: solid 1px #666;
}
.box01:before, .box01:after{
    content: '';
    position: absolute;
    top: -10px;
    width: 1px;
    height: -webkit-calc(100% + 20px);
    height: calc(100% + 20px);
    background-color: #666;
}
.box01:before {left: 10px;}
.box01:after {right: 10px;}
.box01 p {
    margin: 0; 
    padding: 0;
}

.box02{
    margin:2em 0;
    position: relative;
    padding: 0.5em 1.5em;
    border-top: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
}
.box02:before, .box02:after{
    content: '';
    position: absolute;
    top: -10px;
    width: 1px;
    height: -webkit-calc(100% + 20px);
    height: calc(100% + 20px);
    background-color: #ccc;
}
.box02:before {left: 10px;}
.box02:after {right: 10px;}
.box02 p {
    margin: 0; 
    padding: 0;
}

  /* 文字の左右にライン */

.line01 span {
	display: inline-block;
	position: relative;
}
 
.line01 span:before,
.line01 span:after {
	content: "";
	position: absolute;
	height: 4px;
	border-top: 1px solid #ccc;
	top: 50%;
	width: 50%;}
 
.line01 span:before {
	right: 100%;
	margin-right: 50px;
}
 
.line01 span:after {
	left: 100%;
	margin-left: 50px;
}

.line02 span {
	display: inline-block;
	position: relative;
}
 
.line02 span:before,
.line02 span:after {
	content: "";
	position: absolute;
	height: 4px;
	border-top: 1px solid #ccc;
	top: 50%;
	width: 20%;}
 
.line02 span:before {
	right: 100%;
	margin-right: 50px;
}
 
.line02 span:after {
	left: 100%;
	margin-left: 50px;
}

 /* 画像差し込んだ風 */
 .photo_frame01 {
	display: inline-block;
	position: relative;
	box-sizing:border-box;
	overflow: hidden; /* 不要部分を消す */
	padding: 6px; /* 6px だけは写真からはみ出す */}

.photo_frame01:before,
.photo_frame01:after {
	content: "";
	position: absolute;
	z-index: 1;
	width: 97px;
	height: 50px;
	background: #fff; /* 背景色 */
	transform: rotate(-30deg);}
.photo_frame01:before {
	box-shadow: 0 10px 8px -12px rgba(0, 0, 0, 0.8);
	top: -24px;
	bottom: auto;
	right: auto;
	left: -26px;}
.photo_frame01:after {
	box-shadow: 0 -10px 10px -10px rgba(0, 0, 0, 0.7);
	top: auto;
	bottom: -22px;
	right: -25px;
	left: auto;}

 /* 画像重なった風*/
 .photo_frame02
 {display:inline-block;
   position:relative;}
 
.photo_frame02:after {
	position: absolute;
	display: block;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
	transform: rotate(3deg); /* 回転させる */
	background: #fff;
	z-index: -1;}

 /* 画像を円に*/
.photo_frame03
{border-radius:50%;
box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.1);}

.photo_frame0302
{border-radius:50%;}

 /* 画像のふちをぼかす*/
.photo_frame04 {
	display: inline-block;
	position: relative;}
	
.photo_frame04:after {
	position: absolute;
	display: block;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow: 
	  inset 0 0 20px #fff /* 背景色と同じ色 */,
	  inset 0 0 20px #fff,
	  inset 0 0 20px #fff,
	  inset 0 0 20px #fff;
}

 /* 画像をドロップシャドウ*/
.photo_frame05
{box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.15);}

 /* 画像を角丸*/
.photo_frame06
{border-radius:5px;}

 /* 円にする*/
.circle
{position:relative;
  border-radius: 50%;
  text-align:center;
  display:block;;}

.circle>span
{position: absolute;
  display: inline-block;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width:100%;
  text-align:center;}
  

a
{-webkit-transition: 0.3s ease-in-out;  
	transition: 0.3s ease-in-out;}

a:hover.on
{opacity:0.7}