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


/* =============================================================================
   HTML5 display definitions
   ========================================================================== */

/* Corrects block display not defined in IE8/9. */

article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary {display: block}

/* Corrects inline-block display not defined in IE8/9. */

audio,canvas,video {display : inline-block}
    
/* Prevents modern browsers from displaying 'audio' without controls */

audio:not([controls]) { display: none;height: 0}

/* Addresses styling for 'hidden' attribute not present in IE8/9. */

[hidden] {display: none}


/* ============================================================================= */


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-style:normal;
	font-weight: normal;
	font-size: 100%;
	vertical-align: baseline;
}

html{
    overflow-y: scroll;
}

/* 禁則処理の追加 */
p,li,dt,dd,th,td,pre{
 -ms-line-break: strict;
 line-break: strict;
 -ms-word-break: break-strict;
 word-break: break-strict;
 overflow-wrap:break-word;
}
/*Sets consistent quote types.*/
q {
  quotes: “\201C” “\201D” “\2018” “\2019;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

input, textarea{
	margin: 0;
	padding: 0;
}

ol, ul ,li{
    list-style:none;
	margin:0;
}

table{
    border-collapse: collapse;
    border-spacing:0;
}

caption, th{
    text-align: left;
}

a{
  text-decoration:none;
  -webkit-tap-highlight-color:rgba(0,0,0,0); /* ios のHover効果を無効化 */
  margin:0;
  cursor:default;
  }
a:focus {
	outline:none;
}

/*Removes border when inside `a` element in IE 8/9.*/


img {
 max-width :100%; /* フルードイメージへの対応 */
 vertical-align: middle; /* 追加箇所 */
 border: 0;
outline:none;
  margin:0;
}


svg{
	margin:0;
	padding:0;
}


small{
	font-size:1em;
}


/* =============================================================================
   Forms
   ========================================================================== */
input[type="radio"]{
-webkit-appearance: none; /* remove default */
}

/* Define consistent border, margin, and padding*/

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/* 1. Corrects color not being inherited in IE 8/9.
 2. Remove padding so people aren’t caught out if they zero out fieldsets. */

legend {
    border: 0; /* 1 */
    padding: 0; /* 2 */
}

/* 1. Corrects font family not being inherited in all browsers.
 * 2. Corrects font size not being inherited in all browsers.
 * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome */

button, input, select, textarea {
	font-family: inherit; /* 1 */
	font-size: 100%; /* 2 */
	margin: 0; /* 3 */
}

/*Addresses Firefox 4+ setting `line-height` on `input` using `!important` in  the UA stylesheet.*/

button,input {
  line-height: normal; /* 1 */
}

/* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`  and `video` controls.
 * 2. Corrects inability to style clickable `input` types in iOS.
 * 3. Improves usability and consistency of cursor style between image-type `input` and others. */

button,
input[type="button"],  /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}


/*Re-set default cursor for disabled elements. */
button[disabled],
input[disabled] {
  cursor: default;
}


/* 1. Addresses box sizing set to content-box in IE8/9
 * 2. Removes excess padding in IE8/9*/

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

/*
 * 1. Addresses appearance set to searchfield in S5, Chrome
 * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/*
 * Removes inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}

/* Removes inner padding and border in Firefox 4+. */
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}

/* 1. Removes default vertical scrollbar in IE 8/9.
 * 2. Improves readability and alignment in all browsers. */
textarea {
overflow: auto; /* 1 */
vertical-align: top; /* 2 */
}

/* =============================================================================
   end Forms ↑
    ========================================================================== */



/* =============================================================================
   crear fix & other
    ========================================================================== */


.cf:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

.cf {
	min-height: 1px;
}

* html .cf {
	height: 1px;
	/*¥*//*/
	height: auto;
	overflow: hidden;
	/**/
}

.both{
	clear:both;
}

.inline_block {
	display: inline-block;
	*display: inline;
	*zoom: 1;
}



.invis{
  visibility:hidden;
  display:none;
}




/* =============================================================================
   type settings
    ========================================================================== */


/* =============================================================================
   Yagichu logo setting
    ========================================================================== */

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

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-ycb_logo_yoko:before {
  content: "\e900";
  color: #595757;
}



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




/* =============================================================================
   basic typeseting　
    ========================================================================== */

html,body{
    font-family:-apple-system-body, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Noto Sans Japanese", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "游ゴシック  Medium", "Yu Gothic Medium", sans-serif;/* ゴシックセレクトセット2017年度版 */
    -webkit-text-size-adjust: 100%;/* スマホ・タブレットなど縦横の文字サイズ調整をナシ（safariのみ) */
    -ms-text-size-adjust: 100%;/* 上記IE用（不要？） */
    
    
    font-size:16px;/* 1024pxの時に16px=1.5625vw *//* 1rem  基本font-sizeの明示化 */
    font-weight:normal;
    line-height:1.5;/* 行高さ=25px */
	color:#222;
}





/* ===== 共通：基本文字色指示 ===== */
.green{
	color:#00a094;
}
.d_green{
	color:#06787e;
}
.red{
	color:#ec3214;
}
.aqua{
	color:#4cc8ff;
}
.blue{
	color:#24648c;
}
.orange{
	color:#ec781e;
}
.purple{
	color:#735a96;
}
.sun{
	color:#f4a210;
}
.sepia{
	color:#786e50;
}


/* =============================================================================
   vertical rhythm = 4px 24px
    ========================================================================== */
  
h2,h3,h4,h5,h6,p{
    margin-bottom:24px;/* 1024pxの時に24px=2.34375vw *//* 24px 各要素のbottomのアキも24pxでリズムを維持*/
}
    
/* h1のスタイルは各サイト毎で変わるため、style.cssに記述のこと */
    
h2{
      font-size:187.5%;/* 30px=187.5%　 行間を開けるため50pxより小さく設定 */
      line-height:1.6;/* 行間でピッチを修正 1L=48px */
    }
    
    h3{
      font-size:156.25%;/* 25px = 156.25% 行間を詰めるため40pxより小さく設定 */
      line-height:1.92;/* 行間でピッチを修正 1L=48px */
	  text-align:center;
    }
    
    h4{
      font-size: 118.75%;/*  118.75% = 20px 行間を開けるため24pxより小さく設定 */
      line-height:1.2;/* 行間でピッチを修正 1L=24px */
	  text-align:center;
    }
    
    h5{
      font-size: 118.75%;/* 118.75% = 18px 行間を開けるため24pxより小さく設定 */
      line-height:1.33333333;/* 1L=24px */
	  text-align:center;
    }
    
    
    h6,p,li,aside,a{
      font-size:100%;/* 16px */
      line-height:1.5;/* 1L=24px */
      letter-spacing:0;/* 初期：0.05em */
    }
    
 /* =============================================================================
    end type setting
    ========================================================================== */


.hidden{
	visibility:hidden;
}

/* ここからレスポンシブ共通指定 */

@media screen and (max-width:759px){
/* =============================================================================
   responsiv 対応の「非表示」のクラス設定　小画面の設定
    ========================================================================== */

.invis_sml_onl_line,
.invis_sml_onl{/* 「小画面」で非表示（無効にする） */
  display:none;
}


.invis_mdl_onl_line{/* 中画面で非表示（無効にする）。ここ「小画面」では表示 */
  display:inline;/* ここは「小画面」の指示なので表示（有効）：インライン */
}
.invis_mdl_onl{/* 中画面で非表示（無効にする）なのでここ「小画面」では表示 */
  display:block; /* ここは「小画面」の指示なので表示（有効）：基本はブロック */
}


.invis_pc_onl_line{/* PCで非表示（無効にする）。ここ「小画面」では表示 */
  display:inline;/* ここは「小画面」の指示なので表示：インライン */
}
.invis_pc_onl{/* PCだけ非表示（無効にする）＝中画面と小画面は表示 */
  display:block;/* ここは「小画面」の指示なので表示：基本はブロック */
}




.invis_sml_mdl_line,
.invis_sml_mdl{/* 「小画面」と中画面で非表示（無効にする）。ここ「小画面」では非表示 */
  display:none;/* ここは「小画面」の指示なので非表示（無効にする） */
}

.invis_mdl_pc_line{/* 中画面とPCで非表示（無効にする）。ここ「小画面」では表示 */
  display:inline;/* ここは「小画面」の指示なので表示：インライン */
}
.invis_mdl_pc{/* 中画面とPCで非表示（無効にする）。ここ「小画面」では表示 */
  display:block;/* ここは「小画面」の指示なので表示：基本はブロック */
}

.invis_sml_pc_line,
.invis_sml_pc{/* 「小画面」とPCで非表示（無効にする）。ここ「小画面」では非表示 */
	display:none; /* ここは「小画面」の指示なので非表示（無効にする） */
}


/* =============================================================================
   responsiv 対応の「非表示」のクラス設定 ここまで
    ========================================================================== */




}

@media screen and (min-width:760px){

/* =============================================================================
   responsiv 対応の「非表示」のクラス設定　中画面の設定
    ========================================================================== */

.invis_sml_onl_line{/* 小画面で非表示（無効にする）。ここ「中画面」では表示 */
  display:inline;/* ここは「中画面」の指示なので表示（有効）：インライン */
}
.invis_sml_onl{/* 小画面で非表示（無効にする）。ここ「中画面」では表示 */
  display:block;/* ここは「中画面」の指示なので表示（有効）：基本はブロック */
}


.invis_mdl_onl_line,
.invis_mdl_onl{/* 「中画面」で非表示（無効にする）。ここ「中画面」では非表示 */
  display:none;/* ここは「中画面」の指示なので非表示（無効にする） */
}


.invis_pc_onl_line{/* PCで非表示（無効にする）。ここ「中画面」では表示 */
  display:inline;/* ここは「中画面」の指示なので表示：インライン */
}
.invis_pc_onl{/* PCだけ非表示（無効にする）＝中画面と小画面は表示 */
  display:block;/* ここは「中画面」の指示なので表示：基本はブロック */
}




.invis_sml_mdl_line,
.invis_sml_mdl{/* 小画面と「中画面」で非表示（無効にする）。ここ「中画面」では非表示 */
  display:none;/* ここは「中画面」の指示なので非表示（無効にする） */
}

.invis_mdl_pc_line,
.invis_mdl_pc{/* 「中画面」とPCで非表示（無効にする）。ここ「中画面」では非表示 */
  display:none;/* ここは「中画面」の指示なので表示：インライン */
}

.invis_sml_pc_line{/* 小画面とPCで非表示（無効にする）。ここ「中画面」では表示 */
	display:inline; /* ここは「中画面」の指示なので表示：インライン */
}
.invis_sml_pc{/* 小画面とPCで非表示（無効にする）。ここ「中画面」では表示 */
	display:block; /* ここは「中画面」の指示なので表示：基本はブロック */
}

/* =============================================================================
   responsiv 対応の「非表示」のクラス設定 ここまで
    ========================================================================== */




}




@media screen and (min-width:1024px){



/* =============================================================================
   responsiv 対応の「非表示」のクラス設定　PC画面以上の設定
    ========================================================================== */

.invis_sml_onl_line{/* 小画面で非表示（無効にする）。ここ「PC」では表示 */
  display:inline;/* ここは「PC」の指示なので表示（有効）：インライン */
}
.invis_sml_onl{/* 小画面で非表示（無効にする）。ここ「PC」では表示 */
  display:block;/* ここは「PC」の指示なので表示（有効）：基本はブロック */
}


.invis_mdl_onl_line{/* 中画面で非表示（無効にする）。ここ「PC」では表示 */
  display:inline;/* ここは「PC」の指示なので表示（有効）：インライン */
}
.invis_mdl_onl{/* 中画面で非表示（無効にする）。ここ「PC」では表示 */
  display:block;/* ここは「PC」の指示なので表示（有効）：基本はブロック */
}


.invis_pc_onl_line,
.invis_pc_onl{/* 「PC」で非表示（無効にする）。ここ「PC」では非表示 */
  display:none;/* ここは「PC」の指示なので非表示（無効にする） */
}




.invis_sml_mdl_line{/* 小画面と中画面で非表示（無効にする）。ここ「PC」では表示 */
  display:inline;/* ここは「PC」の指示なので表示（有効）：インライン */
}
.invis_sml_mdl{/* 小画面と中画面で非表示（無効にする）。ここ「PC」では表示 */
  display:block;/* ここは「PC」の指示なので表示（有効）：基本はブロック */
}

.invis_mdl_pc_line,
.invis_mdl_pc{/* 中画面と「PC」で非表示（無効にする）。ここ「中画面」では非表示 */
  display:none;/* ここは「PC」の指示なので非表示（無効にする） */
}

.invis_sml_pc_line,
.invis_sml_pc{/* 小画面と「PC」で非表示（無効にする）。ここ「PC」では非表示 */
  display:none;/* ここは「PC」の指示なので非表示（無効にする） */
}




/* =============================================================================
   responsiv 対応の「非表示」のクラス設定 ここまで
    ========================================================================== */



}