/* ##############################################################################

    COMMON

############################################################################## */
  html {
    font-size: 16px;
  }
  body {
    font-family:'Noto Sans JP', YuGothic, 'Yu Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic ProN', sans-serif;
    line-height: 1.8;
    font-weight: 500;
    font-feature-settings: "palt";
    letter-spacing: .08em;
    /* *font-size: small;
    *font: x-small; */
    color:var(--base-color);
    -webkit-font-smoothing: antialiased;
    word-break: break-word;
  }
  ul,
  ol { list-style: none; }
  small { font-size: .875rem; /* 14px */ }
  a,
  a[href="javascript:void(0);"]:hover {
    color: #333;
    text-decoration: none;
    transition: all .4s ease-out;
    outline : none;
  }
  a[href="javascript:void(0);"],
  a[href="javascript:void(0);"]::before {
    color: inherit;
    cursor: default;
    opacity: 1;
    text-decoration: none;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
  }
  a:focus {
    text-decoration: none !important;
  }
  img {
    vertical-align: middle;
  }
  address,
  em,
  i {
    font-style: normal;
  }
  h1, h2, h3, h4, h5, h6 {
    line-height: 1.4;
  }
  svg {
    transition: all .4s ease-out;
  }
  @media screen and (max-width: 767px) {
    html {
      font-size: 14px;
    }
    body {
      -webkit-text-size-adjust: none;
    }
    img {
      max-width: 100%;
      height: auto;
    }
    small { font-size: .813rem; /* 13px */ }
  }
/* 見出し
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  }
h1 { font-size: 3rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.0rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 2.8rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

/* PC表示 */
@media (min-width: 550px) {
  h2 { font-size: 2.5rem; }
  h3 { font-size: 2.5rem; }
  h4 { font-size: 2.0rem; }
  h5 { font-size: 1.8rem; }
  h6 { font-size: 1.5rem; }
}

p {
  margin-top: 0; }
  
.bold{
  font-weight: bold;
}
/* 見出し span
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*h2*/ 
.under {
    padding:0 1rem 1rem 1rem;
    color: var(--base-color);
    font-weight: bold;
    letter-spacing: 0.18em;
}
.under_white {
    padding:0 1rem 1rem 1rem;
    color: var(--white-color);
    font-weight: bold;
    letter-spacing: 0.08em;
}
.under_sub01 {
    padding:0 1rem 1rem 1rem;
    color: var(--gray-color);
    letter-spacing: 0.1em;
    font-weight: 500;
}

.under_sub02 {/*少しフォントの大きいサブキャッチ*/
    padding:0 1rem 1rem 1rem;
    color: var(--base-color);
    font-size: 0.45em;
    font-weight: 600;
    letter-spacing: 0.1em;
}
.under_sub03 {/*サブの白文字*/
    padding:0 1rem 1rem 1rem;
    color: var(--white-color);
    font-weight: nomal;
    letter-spacing: 0.1em;
    font-weight: bold;
}



/* 背景
**************************************** */

.bg_01 {
	background-color: var(--back-subcolor);
}
.bg_main-color {
	background-color: var(--main-color);
}
.bg_back-color {
	background-color: var(--back-color);/*背景カラーはメインカラーの透過40％で */
}
.bg_sub-color {
	background-color: var(--sub-color);
}
.bg_backsub-color {
	background-color: var(--back-subcolor);/*★背景カラーはサブカラーの透過25％ */
}
.bg_gradient-color {
	background: var(--gradient-color);
}
.bg_gradient-color2 {
	background: var(--gradient-color2);
}
.bg_gray {
	background-color: var(--gray-thin-color);
}

/* 文字カラー
**************************************** */

.txt_main-color {
	color: var(--main-color);
}
.txt_sub-color {
	color: var(--sub-color);
}
.txt_accent-color {
	color: var(--accent-color);
}
.txt_white-color {
	color: var(--white-color);
}
.txt_gray-color {
	color: var(--gray-color);
}


/* layout
**************************************** */

  /* --- float --- */
  .flt-rgt { float: right; }
  .flt-lft { float: left; }

  /* --- position --- */
  .pos_rel {
    position: relative;
  }
  .pos_ab {
    position: absolute;
  }
    .pos_st {
      position: static !important;
  }
  /* --- padding--- */ 
  .pad_all10 { padding: 10px; }
  
  .pad_all20 { padding: 10px; }
  
  /* --- margin --- */
  
  .mgn-top10 { margin-top: 10px; }
  .mgn-top20 { margin-top: 20px; }
  .mgn-top50 { margin-top: 50px; }
  .mgn-top100 { margin-top: 100px; }
  
  .mgn-top10 { margin-top: 10px; }  
  .mgn-top10 { margin-top: 10px; }
  
  .mgn-btm8 { margin-bottom: 8px; }
  .mgn-btm16 { margin-bottom: 16px; }
  .mgn-btm24 { margin-bottom: 24px; }
  .mgn-btm32 { margin-bottom: 32px; }
  .mgn-btm40 { margin-bottom: 40px; }
  .mgn-btm48 { margin-bottom: 48px; }
  .mgn-btm56 { margin-bottom: 56px; }
  .mgn-btm64 { margin-bottom: 64px; }
  .mgn-btm72 { margin-bottom: 72px; }
  .mgn-btm80 { margin-bottom: 80px; }
  
  .mt_-5rem { margin-top:-5rem; }/*sectionについてるマージンを消す用 */ 
  .mt_0 { margin-top:0; }/*sectionについてるマージンを消す用 */ 

  .mb_-5rem { margin-bottom:-5rem; }/*sectionについてるマージンを消す用 */ 
    .mb_0 { margin-bottom:0; }/*sectionについてるマージンを消す用 */ 

  /* --- font-size --- */
  .fz-12 { font-size: .75rem; /* 12px */ }
  .fz-13 { font-size: .813rem; /* 13px */ }
  .fz-14 { font-size: .875rem; /* 14px */ }
  .fz-15 { font-size: .938rem; /* 15px */ }
  .fz-16 { font-size: 1rem; /* 16px */ }
  .fz-17 { font-size: 1.063rem; /* 17px */ }
  .fz-18 { font-size: 1.125rem; /* 18px */ }
  .fz-20 { font-size: 1.25rem; /* 20px */ }
  .fz-24 { font-size: 1.5rem; /* 24px */ }
  .fz-26 { font-size: 1.625rem; /* 26px */ }
  .fz-28 { font-size: 1.75rem; /* 28px */ }
  .fz-30 { font-size: 1.875rem; /* 30px */ }
  .fz-32 { font-size: 2rem; /* 32px */ }
  .fz-36 { font-size: 2.25rem; /* 36px */ }
  .fz-40 { font-size: 2.5rem; /* 40px */ }
  .fz-44 { font-size: 2.75rem; /* 44px */ }
  .fz-48 { font-size: 3rem; /* 48px */ }
  .fz-56 { font-size: 3.5rem; /* 56px */ }
  .fz-64 { font-size: 4rem; /* 64px */ }

  /* --- pc or sp --- */
  .pc-none,
  .pc-none-inline,
  .pc-none-table,
  .pc-none-flex { display: none; }
  .sp-none { display: block; }
  .sp-none-inline { display: inline; }
  .sp-none-table { display: table; }
  .sp-none-flex {
    display: flex;
  }
  @media screen and (max-width: 767px) {
    /* --- margin --- */
    .mgn-btm16 { margin-bottom: 8px; }
    .mgn-btm24 { margin-bottom: 16px; }
    .mgn-btm32 { margin-bottom: 16px; }
    .mgn-btm40 { margin-bottom: 24px; }
    .mgn-btm48 { margin-bottom: 24px; }
    .mgn-btm56 { margin-bottom: 32px; }
    .mgn-btm64 { margin-bottom: 32px; }
    .mgn-btm72 { margin-bottom: 40px; }
    .mgn-btm80 { margin-bottom: 40px; }

    /* --- font-size --- */
    .fz-12 { font-size: .786rem; /* 11px */ }
    .fz-13 { font-size: .857rem; /* 12px */ }
    .fz-14 { font-size: .929rem; /* 13px */ }
    .fz-15 { font-size: 1rem; /* 14px */ }
    .fz-16 { font-size: 1.071rem; /* 15px */ }
    .fz-17 { font-size: 1.143rem; /* 16px */ }
    .fz-18 { font-size: 1.214rem; /* 17px */ }
    .fz-20 { font-size: 1.286rem; /* 18px */ }
    .fz-24 { font-size: 1.429rem; /* 20px */ }
    .fz-26 { font-size: 1.429rem; /* 20px */ }
    .fz-28 { font-size: 1.714rem; /* 24px */ }
    .fz-30 { font-size: 1.714rem; /* 24px */ }
    .fz-32 { font-size: 1.857rem; /* 26px */ }
    .fz-36 { font-size: 1.857rem; /* 26px */ }
    .fz-40 { font-size: 2rem; /* 28px */ }
    .fz-44 { font-size: 2rem; /* 28px */ }
    .fz-48 { font-size: 2.143rem; /* 30px */ }
    .fz-56 { font-size: 2.286rem; /* 32px */ }
    .fz-64 { font-size: 2.571rem; /* 36px */ }

    /* --- pc or sp --- */
    .sp-none,
    .sp-none-inline,
    .sp-none-table,
    .sp-none-flex { display: none; }
    .pc-none { display: block; }
    .pc-none-inline { display: inline; }
    .pc-none-table { display: table; }
    .pc-none-flex {
      display: flex;
    }
  }

/* flex
**************************************** */

  /* --- ブロック要素 --- */
  .flex {
    display: flex;
  }

  /* --- インライン要素 --- */
  .flex-inline {
    display: inline-flex;
  }

  /* --- 逆向き --- */
  .flex-reverse {
    flex-direction: row-reverse;
  }

  /* --- 縦並び --- */
  .flex-column {
    flex-direction: column;
  }
  

  /* --- 水平方向揃え --- */
  .flex-j-start {
    justify-content: flex-start;
  }
  .flex-j-end {
    justify-content: flex-end;
  }
  .flex-j-ctr {
    justify-content: center;
  }
  .flex-j-between {
    justify-content: space-between;
  }
  .flex-j-around {
    justify-content: space-around;
  }

  /* --- 垂直方向揃え --- */
  .flex-a-start {
    align-items: flex-start;
  }
  .flex-a-end {
    align-items: flex-end;
  }
  .flex-a-ctr {
    align-items: center;
  }
  .flex-a-baseline {
    align-items: baseline;
  }
  .flex-a-stretch {
    align-items: stretch;
  }

  /* --- 子要素の折り返し設定 --- */
  .flex-c-nowrap {
    flex-wrap: nowrap;
  }
  .flex-c-wrap {
    flex-wrap: wrap;
  }

  /* --- 子要素の複数行設定 --- */
  .flex-c-reverse {
    flex-wrap: wrap-reverse;
  }
  .flex-c-start {
    align-content: flex-start;
  }
  .flex-c-start {
    align-content: flex-start;
  }
  .flex-c-end {
    align-content: flex-end;
  }
  .flex-c-ctr {
    align-content: center;
  }
  .flex-c-baseline {
    align-content: baseline;
  }
  .flex-c-stretch {
    align-content: stretch;
  }
  
  @media screen and (max-width: 767px) {
    /* --- 縦並び - sp --- */
    .flex-sp-block {
      flex-direction: column;
    }
	
  }

/* txt
**************************************** */
  .txt-ctr,
  .txt-ctr-pc {
    text-align: center;
  }
  .txt-rgt,
  .txt-rgt-pc {
    text-align: right;
  }

  @media screen and (max-width: 767px) {
    .txt-ctr-pc,
    .txt-rgt-pc { text-align: left; }
  }
  




/* リンク
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: #0080ff; }
a:hover {
    opacity:0.7;
    transform:1.5s;
 }
 
/* 制作ボタン
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.btn_01,
.btn_01_wide{
    display: block;
    width:70%;
    max-width:200px;
    text-align: center;
    color: var(--white-color);
    background-color: var(--sub-color);
    margin:20px auto;
    padding:10px;
    font-weight: bold;    
}
.btn_01{
    max-width:200px;
}
.btn_01_wide{
    max-width:300px;
    padding:20px; 
}

.btn_02,
.btn_02_wide{
    display: block;
    width:70%;
    max-width:200px;
    text-align: center;
    color: var(--white-color);
    background-color: var(--base-color);
    margin:20px auto;
    padding:10px;    
    font-weight: bold;  
}
.btn_02{
    max-width:200px;
}
.btn_01_wide,
.btn_02_wide{
    max-width:300px;
    padding:20px; 
}

.btn_white{
    display: block;
    width:70%;
    max-width:300px;
    text-align: center;
    color: var(--sub-color);
    background-color: var(--white-color);
    margin:20px auto;
    padding:20px;
	font-weight:bold;  
}


/* ボタン
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
    display: inline-block;
    height: 38px;
    padding: 0 30px;
    color: #FFF;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    line-height: 38px;
    letter-spacing: .1rem;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    /* border: 1px solid #bbb; */
    cursor: pointer;
    box-sizing: border-box;
    background-color: var(--sub-color);
}
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {	
    background-color: var(--main-color);
  outline: 0; }


/* フォーム
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px;
  background-color: #fff;
  border: 1px solid #D1D1D1;
  box-shadow: none;
  box-sizing: border-box;
  font-size: 16px;
  border-radius: 5px;}

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 150px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #0FA0CE;
  outline: 0; }
label,
legend {
  /*display: block;*/
  margin-bottom: .5rem;
  font-weight: 500; }
fieldset {
  padding: 0;
  border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
  display: inline; }
label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; }


/* リスト
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: circle inside; }
ol {
  list-style: decimal inside; }
ol, ul {
  padding-left: 0;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }
li {
  margin-bottom: 1rem; }


/* コード
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #F1F1F1;
  border: 1px solid #E1E1E1;
  border-radius: 4px; }
pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre; }


/* テーブル
–––––––––––––––––––––––––––––––––––––––––––––––––– */
table {
	border-collapse: collapse; }
th,
td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #E1E1E1; }
th:first-child,
td:first-child {
  padding-left: 0; }
th:last-child,
td:last-child {
  padding-right: 0; }


/* スペース
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 1rem; }


/* 全幅
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.full-width {
  width: 100%;
  box-sizing: border-box; }
.max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.pull-right {
  float: right; }
.pull-left {
  float: left; }


/* 罫線
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1; 
}

/*footerSNS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* ボタン全体 */
.flowbtn10{
display:inline-block;	
font-size:35px;
text-decoration:none;
transition:.5s;
color:#444;	
}
/* インスタ・pocket・ラインだけ少し大きく */
.flowbtn10 .fa-instagram,.flowbtn10 .fa-get-pocket,.flowbtn10 .fa-get-pocket,.flowbtn10 .fa-line{
font-size:38px;
}
/* Twitterマウスホバー時 */
.flowbtn10 .fa-twitter:hover{
color:#55acee;
}
/* Instagramマウスホバー時 */
.flowbtn10 .fa-instagram:hover{
color:#c6529a;
}
/* Facebookマウスホバー時 */
.flowbtn10 .fa-facebook-f:hover{
color:#3b5998;
}
/* Feedlyマウスホバー時 */
.flowbtn10 .fa-rss:hover{
color:#6cc655;
}
/* Pocketマウスホバー時 */
.flowbtn10 .fa-get-pocket:hover{
color:#ef3f56;
}
/* はてブマウスホバー時 */
.flowbtn10 .fa-bold:hover{
color:#1ba5dc;	
}
/* YouTubeマウスホバー時 */
.flowbtn10 .fa-youtube:hover{
color:#fc0d1c;
}
/* LINEマウスホバー時 */
.flowbtn10 .fa-line:hover{
color:#00c300;
}
/* メールアイコンマウスホバー時 */
.flowbtn10 .fa-envelope:hover{
color:#f3981d;		
}
/* ulタグの内側余白を０にする */
ul.snsbtniti{
padding:0!important;
list-style-type:none;
}
/* アイコン全体の位置 */
.snsbtniti{
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
}

/* アイコン同士の余白 */
.snsbtniti li{
text-align:center!important;
}

.ls100 {
  letter-spacing: 0.2em;
}