@charset "UTF-8";
/*
# Sass、フォントをimport 
*/
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url(https://fonts.googleapis.com/css?family=Roboto:700);
/*変数、mixin、プレースホルダー 定義　適宜変更・追加すること*/
/*
# 画像
*/
/*
# フォント
*/
/* フォントサイズのバリエーション */
/* 英語フォントのバリエーション */
/* フォントサイズのミックスイン指定 */
/*
# 色
*/
/* ベースカラー */
/* テーマカラー */
/* 強調カラー */
/* リンクカラー */
/* その他のカラー */
/*
#　幅
*/
/*コンテンツ幅*/
/*スペース*/
/*
 #　メディアクエリ設定 
 */
/*
#　プレースホルダー
*/
/*clearfix*/
.dlBasic01, .ulBtn01, .boxFlexList01, .boxList05, .boxList04, .boxList03, .boxList02, .boxList01, .boxContent03, .boxContent02, .boxContent01, .containerPop01, .container01, .section02, .section01, .boxTxt, #sitemap .boxContent, #bnrs .ulThumb01, #container {
  *zoom: 1;
}
.dlBasic01:after, .ulBtn01:after, .boxFlexList01:after, .boxList05:after, .boxList04:after, .boxList03:after, .boxList02:after, .boxList01:after, .boxContent03:after, .boxContent02:after, .boxContent01:after, .containerPop01:after, .container01:after, .section02:after, .section01:after, .boxTxt:after, #sitemap .boxContent:after, #bnrs .ulThumb01:after, #container:after {
  content: "";
  display: table;
  clear: both;
}

/*
#　汎用mixin
*/
/*opacity 例：@include opacity(0.8);*/
/*box-shadow（ボックスシャドウ）*/
/*box-sizing*/
/*scale(スケール)*/
/*bgSize(背景画像のサイズ)*/
/*vertical-align（天地の中央に配置）*/
/*gradient（グラデーション） 例：@include gradient($property, vertical);*/
/*arrow やじるしのスタイル 例：@include arrow($baseColor01, right, 6px, 5px, inline-block); デフォルトでは右向きやじるし*/
/*transition（CSSアニメーション） */
/*rotate 回転スタイル*/
/*flexbox（フレックスボックス）*/
/*flex-order（表示の順番）*/
/*flex-direction（表示の方向） $directionはcolumn、row、column-reverse、row-reverseから選択*/
/*flex-align(子要素の配置) $alignはcenter,start,end,stretchから選択*/
/*flex-wrap(折り返し設定) nowrap,wrap,wrap-reverse*/
/* keyframes */
/* animation */
/**
 * html5doctor.com Reset Stylesheet v1.6.1 (http://html5doctor.com/html-5-reset-stylesheet/)
 * Richard Clark (http://richclarkdesign.com)
 * http://cssreset.com
 */
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: bottom;
  background: transparent;
}

html, body {
  width: 100%;
}

body {
  line-height: 1;
}

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

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

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  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 #cccccc;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

img {
  border: none;
  vertical-align: top;
  zoom: 1;
}

/*
# 基本フォントサイズ指定
*/
html {
  font-size: 62.5%;
}

body {
  /*font size自動調整をきる*/
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -o-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-family: "Noto Sans Japanese", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", Arial, Helvetica, Verdana, sans-serif;
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.6;
  color: #666;
  font-weight: 300;
}

/*
# 共通レイアウト
※全ページ共通のレイアウトを記述してください。（他：メインビジュアル、バナー、フッター用サイトマップ、イベントニュースカルーセル、お問い合わせエリア、など・・・）
*/
/*
# body,html
*/
body, html {
  /*ipad対策*/
  height: 100%;
  width: 100%;
}
@media only screen and (max-width: 767px) {
  body {
    min-width: 320px;
  }
}
/*
# header
*/
header {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 4;
}

#headerTxt {
  background-color: #eee;
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  padding: 2px;
  font-weight: normal;
  color: #666;
  position: relative;
  z-index: 2;
  height: 12px;
  line-height: 12px;
  overflow: hidden;
  font-size: 10px;
  font-size: 1rem;
}

#navHeader01_wp {
  display: table;
  width: 100%;
  position: relative;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
@media only screen and (max-width: 767px) {
  #navHeader01_wp {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
  }
}

#navHeader01 {
  display: table-cell;
  vertical-align: middle;
}
@media only screen and (max-width: 480px) {
  #navHeader01 {
    height: 50px;
  }
}

#logo {
  display: table-cell;
  vertical-align: middle;
  padding: 0 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  width: 20%;
}
@media only screen and (min-width: 1000px) {
  #logo {
    width: 250px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 999px) {
  #logo {
    width: 200px;
  }
}
@media only screen and (max-width: 767px) {
  #logo {
    width: 100%;
    padding: 10px;
    text-align: left;
  }
}
#logo img {
  height: auto;
  width: 100%;
}
@media only screen and (max-width: 767px) {
  #logo img {
    width: auto;
    height: 40px;
    margin-left: 0;
    text-align: left;
  }
}
@media only screen and (max-width: 480px) {
  #logo img {
    height: auto;
    max-width: 140px;
    width: 100%;
  }
}

#headerInfo {
  display: table;
  margin: 0 0 auto auto;
}

#headerTel, #topNav {
  display: table-cell;
  vertical-align: middle;
}
@media only screen and (max-width: 767px) {
  #headerTel .txtSmall01, #topNav .txtSmall01 {
    display: none;
  }
}

#headerTel {
  line-height: 1;
  padding: 0 10px;
}
@media only screen and (max-width: 767px) {
  #headerTel .mypage_btn {
    display: none;
  }
}
#headerTel .mypage_btn a {
  display: flex;
  align-items: center;
  text-decoration: none;
  border: solid 2px #8ED0C9;
  border-radius: 50px;
  color: #333;
  font-weight: bold;
  padding: 5px 10px;
}
#headerTel .mypage_btn a:hover {
  background: #dffaf9;
}
#headerTel .mypage_btn a i {
  margin-right: 5px;
  width: 15px;
}
#headerTel .mypage_btn a i img {
  width: 100%;
  height: auto;
}
@media only screen and (max-width: 767px) {
  #headerTel {
    padding: 0;
  }
}
@media only screen and (max-width: 767px) {
  #headerTel .btnTel01 {
    margin: 0;
    padding: 0;
    width: auto;
  }
  #headerTel .btnTel01 a {
    height: 60px;
    border-width: 0 0 0 1px;
    width: 60px;
    overflow: hidden;
    text-indent: -999999px;
    padding: 0;
    border-radius: 0;
    position: relative;
  }
  #headerTel .btnTel01 a::before {
    background: url("/common/img/sprite_ico01.png") 0 -80px no-repeat;
    -webkit-background-size: 80px auto;
    background-size: 80px auto;
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -20px;
    margin-top: -20px;
  }
}

#topNav .ulNav01 {
  width: auto;
}
#topNav .ulNav01 a {
  height: 40px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 20px;
  font-weight: bold;
}
@media only screen and (min-width: 768px) and (max-width: 999px) {
  #topNav .ulNav01 a {
    padding: 0 5px;
  }
}
@media only screen and (max-width: 767px) {
  #topNav .ulNav01 a {
    height: 60px;
    padding: 0 5px;
    width: 88px;
  }
}
#topNav .ulNav01 a .inner::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  background-image: url("/common/img/sprite_ico01.png");
  background-repeat: no-repeat;
  background-size: 40px auto;
}
@media only screen and (max-width: 767px) {
  #topNav .ulNav01 a .inner::before {
    display: block;
    margin: 0 auto;
  }
}
#topNav .ulNav01 a span {
  vertical-align: middle;
  line-height: 1;
}
#topNav .ulNav01 .contact a {
  background-color: #8ed0c9;
  color: #fff;
}
#topNav .ulNav01 .contact a .inner::before {
  background-position: -20px -60px;
}
#topNav .ulNav01 .entry a {
  background-color: #fff100;
  color: #00b1a9;
}
#topNav .ulNav01 .entry a .inner::before {
  background-position: 0 -80px;
}

#gNav {
  width: 100%;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
@media only screen and (max-width: 767px) {
  #gNav {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9999;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
    padding-top: 2px;
    background-color: #00b1a9;
    display: block;
    overflow: hidden;
  }
}
#gNav .extra {
  display: none;
}
@media only screen and (min-width: 768px) {
  #gNav.fixed {
    position: fixed;
    top: -90px;
    left: 0;
    width: 100%;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  }
  #gNav.fixed .last {
    border-right: none;
  }
  #gNav.fixed .extra {
    display: table-cell;
  }
  #gNav.fixed li > a {
    background-color: rgba(255, 255, 255, 0.9);
  }
  #gNav.show {
    top: 0;
  }
}
#gNav li {
  position: relative;
}
#gNav li > a {
  color: #000;
  font-weight: bold;
  padding: 0;
  height: 85px;
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 767px) {
  #gNav li > a {
    background-color: #fff;
    font-weight: normal;
    height: 60px;
  }
}
.PC #gNav li > a:hover {
  background-color: #fff;
}
#gNav li > a > .inner::before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  margin: 0 auto 5px;
  position: relative;
  background-repeat: no-repeat;
  background-size: 60px auto;
  background-image: url("/common/img/sprite_gNav01.png");
}
@media only screen and (max-width: 767px) {
  #gNav li > a > .inner::before {
    margin: 0 auto;
  }
}
@media only screen and (max-width: 767px) {
  #gNav li > a.active {
    background-color: #00b1a9;
    color: #fff;
  }
}
#gNav li > a.active:before {
  content: "";
  background-color: #fff100;
  height: 3px;
  width: 100%;
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
}
@media only screen and (max-width: 767px) {
  #gNav li > a.active:before {
    bottom: auto;
    top: -3px;
  }
}
#gNav li > a.active:after {
  border-width: 7px 7px 0;
  border-color: #fff100 transparent transparent;
  display: block;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  bottom: -7px;
  left: 50%;
  margin-left: -7px;
}
@media only screen and (max-width: 767px) {
  #gNav li > a.active:after {
    bottom: auto;
    top: 0;
  }
}
#gNav li::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 85px;
  z-index: 2;
  background: -moz-linear-gradient(top, rgba(0, 177, 169, 0), rgba(0, 177, 169, 0.5));
  background: -webkit-linear-gradient(top, rgba(0, 177, 169, 0), rgba(0, 177, 169, 0.5));
  background: -o-linear-gradient(top, rgba(0, 177, 169, 0), rgba(0, 177, 169, 0.5));
  background: -ms-linear-gradient(top, rgba(0, 177, 169, 0), rgba(0, 177, 169, 0.5));
  background: linear-gradient(to bottom, rgba(0, 177, 169, 0), rgba(0, 177, 169, 0.5));
}
#gNav li:first-child::before {
  display: none;
}
#gNav #icoGnav0::before {
  background-position: 0 0px;
}
#gNav #icoGnav1::before {
  background-position: 0 -30px;
}
#gNav #icoGnav2::before {
  background-position: 0 -60px;
}
#gNav #icoGnav3::before {
  background-position: 0 -90px;
}
#gNav #icoGnav4::before {
  background-position: 0 -120px;
}
#gNav #icoGnav5::before {
  background-position: 0 -150px;
}
#gNav #icoGnavForm1::before {
  display: none;
}
#gNav #icoGnavForm1 > a {
  background-color: #fff100;
  color: #00b1a9;
}
#gNav #icoGnavForm1 .inner::before {
  background-image: url("/common/img/sprite_ico01.png");
  background-position: 0 -120px;
}

/*
# contents
*/
#contents {
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 768px) and (max-width: 999px) {
  #contents {
    padding-top: 16px;
  }
}

#wpContainer {
  background-color: #eee;
  position: relative;
}

#headerPage {
  background-color: #8ed0c9;
  width: 100%;
  margin-top: 126px;
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 1000px) {
  #headerPage {
    margin-top: 142px;
  }
}
@media only screen and (max-width: 767px) {
  #headerPage {
    margin-top: 60px;
  }
}

#titPage {
  font-size: 36px;
  font-size: 3.6rem;
  font-weight: normal;
  color: #fff;
  line-height: 1;
}
@media only screen and (max-width: 480px) {
  #titPage {
    font-size: 24px;
    font-size: 2.4rem;
  }
}

#wpPankuzu {
  background-color: #00b1a9;
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}
@media only screen and (max-width: 767px) {
  #wpPankuzu {
    display: none;
  }
}

#ulPankuzu {
  display: table;
  height: 30px;
  margin: 0 auto;
  color: #fff;
  overflow: hidden;
}
#ulPankuzu li {
  display: table-cell;
  vertical-align: middle;
  position: relative;
}
#ulPankuzu li a, #ulPankuzu li span {
  padding: 0 10px;
  color: #fff;
  text-decoration: none;
}
#ulPankuzu li a:before, #ulPankuzu li a:after {
  content: "";
  display: block;
  width: 1px;
  height: 20px;
  background-color: #fff;
  position: absolute;
  right: 0;
}
#ulPankuzu li a:before {
  bottom: 15px;
  -webkit-transform-origin: right bottom;
  -ms-transform-origin: right bottom;
  transform-origin: right bottom;
  -webkit-transform: rotate(-20deg);
  -ms-transform: rotate(-20deg);
  transform: rotate(-20deg);
}
#ulPankuzu li a:after {
  top: 15px;
  -webkit-transform-origin: right top;
  -ms-transform-origin: right top;
  transform-origin: right top;
  -webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
}
#ulPankuzu li span {
  font-weight: bold;
}

#mvPage {
  display: table;
  width: 100%;
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}
@media only screen and (max-width: 767px) {
  #mvPage {
    display: block;
  }
}
#mvPage > .boxImg, #mvPage > .boxTxt {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  height: 20vw;
}
@media only screen and (min-width: 768px) and (max-width: 999px) {
  #mvPage > .boxImg, #mvPage > .boxTxt {
    height: 30vw;
  }
}
@media only screen and (max-width: 767px) {
  #mvPage > .boxImg, #mvPage > .boxTxt {
    display: block;
  }
}
#mvPage > .boxImg {
  width: 50vw;
  padding-right: 50px;
  background-color: #fff;
  -webkit-background-size: cover;
  background-size: cover;
}
@media only screen and (max-width: 767px) {
  #mvPage > .boxImg {
    height: 40vw;
    width: auto;
  }
}
#mvPage > .boxTxt {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  padding-bottom: 5vw;
}
@media only screen and (max-width: 767px) {
  #mvPage > .boxTxt {
    height: auto;
    padding: 5vw 10px 10vw;
  }
}
#mvPage > .boxTxt:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  top: 1px;
  left: -100px;
  border-width: 10vw 50px 10vw 50px;
  border-color: transparent #8ed0c9 #8ed0c9 transparent;
  border-style: solid;
}
@media only screen and (min-width: 768px) and (max-width: 999px) {
  #mvPage > .boxTxt:before {
    border-width: 15vw 50px 15vw 50px;
  }
}
@media only screen and (max-width: 767px) {
  #mvPage > .boxTxt:before {
    display: none;
  }
}
#mvPage > .boxTxt i {
  width: 60px;
  height: 60px;
  display: block;
  overflow: hidden;
  text-indent: -999999px;
  background: url("/common/img/sprite_gNav01.png") -60px 0 no-repeat;
  -webkit-background-size: 120px auto;
  background-size: 120px auto;
  margin: 0 auto;
}
@media only screen and (max-width: 480px) {
  #mvPage > .boxTxt i {
    width: 30px;
    height: 30px;
    -webkit-background-size: 60px auto;
    background-size: 60px auto;
  }
}
#mvPage > .boxTxt i.ico1 {
  background-position: -60px -60px;
}
@media only screen and (max-width: 480px) {
  #mvPage > .boxTxt i.ico1 {
    background-position: -30px -30px;
  }
}
#mvPage > .boxTxt i.ico2 {
  background-position: -60px -120px;
}
@media only screen and (max-width: 480px) {
  #mvPage > .boxTxt i.ico2 {
    background-position: -30px -60px;
  }
}
#mvPage > .boxTxt i.ico3 {
  background-position: -60px -180px;
}
@media only screen and (max-width: 480px) {
  #mvPage > .boxTxt i.ico3 {
    background-position: -30px -90px;
  }
}
#mvPage > .boxTxt i.ico4 {
  background-position: -60px -240px;
}
@media only screen and (max-width: 480px) {
  #mvPage > .boxTxt i.ico4 {
    background-position: -30px -120px;
  }
}
#mvPage > .boxTxt i.ico5 {
  background-position: -60px -300px;
}
@media only screen and (max-width: 480px) {
  #mvPage > .boxTxt i.ico5 {
    background-position: -30px -150px;
  }
}

#container {
  max-width: 1200px;
  padding: 0 20px 60px;
  margin: -5vw auto 0;
  position: relative;
  z-index: 2;
}
@media only screen and (max-width: 480px) {
  #container {
    padding: 0 10px 30px;
  }
}

#main {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
@media only screen and (min-width: 1000px) {
  #main {
    width: 75%;
    float: left;
    padding-right: 20px;
  }
}

#sub {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  margin-top: 60px;
}
@media only screen and (max-width: 480px) {
  #sub {
    margin-top: 30px;
  }
}
@media only screen and (min-width: 1000px) {
  #sub {
    width: 25%;
    float: right;
    margin-top: 0;
  }
}
#sub > .boxInner {
  position: relative;
  z-index: 1;
}
#sub .headline01 {
  text-align: center;
  margin-bottom: 10px;
  color: #666;
  font-weight: normal;
  font-size: 18px;
  font-size: 1.8rem;
}
#sub .headline02 {
  padding: 5px;
  background: #fff;
  color: #00b1a9;
  position: relative;
  z-index: 2;
  text-align: center;
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}
#sub .headline02:after {
  border-width: 7px 7.5px 0;
  border-color: #fff transparent transparent;
  display: block;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  bottom: -7px;
  left: 50%;
  margin-left: -7px;
}
#sub ul {
  z-index: 1;
  position: relative;
}

#titSub {
  display: table;
  width: 100%;
  position: relative;
  z-index: 2;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
#titSub > .inner {
  font-weight: normal;
  font-size: 24px;
  font-size: 2.4rem;
  color: #00b1a9;
  line-height: 1.1;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  height: 5vw;
  text-decoration: none;
}
@media only screen and (min-width: 768px) and (max-width: 999px) {
  #titSub > .inner {
    padding: 20px;
    height: auto;
  }
}
@media only screen and (max-width: 767px) {
  #titSub > .inner {
    padding: 20px 10px;
    height: auto;
  }
}

/*
# footer
*/
footer {
  position: relative;
  z-index: 2;
}
@media only screen and (max-width: 767px) {
  footer {
    padding-bottom: 60px;
  }
}

#bnrs {
  background-color: #8ed0c9;
  border: none;
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 4;
}
#bnrs .container01 {
  padding: 10px 0;
  max-width: 1220px;
}
@media only screen and (max-width: 767px) {
  #bnrs .container01 {
    padding: 10px;
  }
}
@media only screen and (max-width: 767px) {
  #bnrs .ulThumb01 {
    display: block;
  }
}
#bnrs .ulThumb01 > li {
  padding: 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
@media only screen and (max-width: 767px) {
  #bnrs .ulThumb01 > li {
    width: 50%;
    display: block;
    float: left;
  }
  #bnrs .ulThumb01 > li:nth-child(n+3) {
    clear: both;
  }
}
@media only screen and (max-width: 480px) {
  #bnrs .ulThumb01 > li {
    width: auto;
    float: none;
    margin: 0 auto;
    max-width: 400px;
  }
}
#bnrs .ulThumb01 > li img {
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

#navFooter {
  padding: 20px;
  background-color: #00b1a9;
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 3;
}
#navFooter .ulNav02 {
  margin: 0 auto;
  line-height: 1.1;
}
@media only screen and (max-width: 767px) {
  #navFooter .ulNav02 {
    background-color: #8ed0c9;
    border: none;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    border-radius: 3px;
  }
}
#navFooter .ulNav02 a {
  padding: 0 30px;
}
@media only screen and (min-width: 768px) and (max-width: 999px) {
  #navFooter .ulNav02 a {
    padding: 0 20px;
  }
}
@media only screen and (max-width: 767px) {
  #navFooter .ulNav02 a {
    padding: 20px;
  }
  #navFooter .ulNav02 a:before, #navFooter .ulNav02 a:after {
    display: none;
  }
}

#sitemap {
  background-color: #eee;
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 2;
}
#sitemap .ulSitemap01 {
  width: 50%;
  float: left;
  text-align: left;
}

#footer {
  position: relative;
}
#footer .boxFooter {
  display: table;
}
@media only screen and (max-width: 767px) {
  #footer .boxFooter {
    display: block;
  }
}
#footer .boxFooter > .boxContent {
  display: flex;
}
@media only screen and (max-width: 767px) {
  #footer .boxFooter > .boxContent {
    flex-direction: column;
    align-items: center;
  }
}
@media only screen and (min-width: 1000px) {
  #footer .ulThumb01 {
    margin-left: 0;
  }
}

#txtFooterWp {
  font-size: 11px;
  font-size: 1.1rem;
}

address {
  padding-right: 30px;
}
@media only screen and (max-width: 767px) {
  address {
    padding-right: 0;
  }
  address h2 {
    width: 200px;
  }
  address h2 img {
    width: 100%;
    height: auto;
  }
}

@media only screen and (max-width: 767px) {
  .hidSP {
    padding-right: 0;
  }
}

.fb-page {
  display: block !important;
  max-width: 500px;
  margin: 0 auto;
}

small {
  text-align: center;
  padding: 10px;
  color: #666;
  display: block;
  border-top: 1px dotted #ccc;
  font-size: 11px;
  font-size: 1.1rem;
}
@media only screen and (max-width: 767px) {
  small {
    padding: 10px 0 20px;
  }
}

#btnPagetop {
  z-index: 100;
  width: 60px;
  height: 60px;
  display: table;
  position: fixed;
  right: 10px;
  bottom: 10px;
  background-color: #00b1a9;
  border-radius: 50%;
  cursor: pointer;
  -webkit-box-shadow: 0 1px 1px #009891;
  -moz-box-shadow: 0 1px 1px #009891;
  box-shadow: 0 1px 1px #009891;
}
@media only screen and (max-width: 767px) {
  #btnPagetop {
    bottom: 70px;
  }
}
#btnPagetop > span {
  display: table-cell;
  color: #fff;
  vertical-align: middle;
  text-align: center;
  font-size: 11px;
  font-size: 1.1rem;
  position: relative;
  padding-top: 10px;
}
#btnPagetop > span:before, #btnPagetop > span:after {
  content: "";
  display: block;
  height: 2px;
  width: 20px;
  position: absolute;
  top: 10px;
  background-color: #fff;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
#btnPagetop > span:before {
  left: 10px;
  -webkit-transform-origin: right top;
  -ms-transform-origin: right top;
  transform-origin: right top;
  -webkit-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  transform: rotate(-30deg);
}
#btnPagetop > span:after {
  right: 10px;
  -webkit-transform-origin: left top;
  -ms-transform-origin: left top;
  transform-origin: left top;
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}
.PC #btnPagetop:hover > span:before {
  -webkit-transform-origin: right top;
  -ms-transform-origin: right top;
  transform-origin: right top;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.PC #btnPagetop:hover > span:after {
  -webkit-transform-origin: left top;
  -ms-transform-origin: left top;
  transform-origin: left top;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

#sns {
  padding: 20px;
  text-align: center;
  width: 300px;
  margin: 0 auto;
  position: relative;
}
@media only screen and (max-width: 767px) {
  #sns {
    width: auto;
  }
}
#sns #btnShare {
  position: relative;
  z-index: 1;
  width: 300px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding: 10px 0;
}
@media only screen and (max-width: 767px) {
  #sns #btnShare {
    width: auto;
  }
}
.PC #sns #btnShare {
  display: table;
  margin: 0 auto;
}
.PC #sns #btnShare:before, .PC #sns #btnShare > span {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.PC #sns #btnShare:before {
  content: "";
  width: 40px;
  height: 40px;
  background: #00b1a9 url("/common/img/sprite_ico01.png") -40px -200px no-repeat;
  border-radius: 20px;
}
.PC #sns #btnShare > span {
  text-align: center;
}
#sns #boxShare {
  z-index: 2;
  margin: 0 auto;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.PC #sns #boxShare {
  width: 300px;
  height: 60px;
  overflow: hidden;
  border-radius: 20px;
  position: absolute;
  top: 20px;
  left: 0;
  padding-left: 40px;
  opacity: 0;
}
#sns #boxShare > ul {
  display: table;
  width: auto;
  height: 60px;
  margin: 0 auto;
}
#sns #boxShare > ul > li {
  display: table-cell;
  vertical-align: middle;
  padding: 0 5px;
}
.PC #sns:hover #btnShare > span {
  opacity: 0;
}
.PC #sns:hover #boxShare {
  opacity: 1;
}

/*
# boxImg,boxTxtの共通設定
*/
.boxImg img {
  width: 100%;
  height: auto;
}

/*
# wrapper
## wraper1
上下に広い余白をあけるスタイル .wrapper01
```
<div class="wrapper01">
	<p>コンテンツが入ります。</p>
</div>
<div class="wrapper01">
	<p>コンテンツが入ります。</p>
</div>
```
## wraper2
上下の余白がないスタイル .wrapper02
```
<div class="wrapper02">
	<p>コンテンツが入ります。</p>
</div>
<div class="wrapper02">
	<p>コンテンツが入ります。</p>
</div>
```
*/
.wrapper01 {
  padding: 60px 0;
  border-top: 1px solid #eee;
}
@media only screen and (max-width: 480px) {
  .wrapper01 {
    padding: 30px 0;
  }
}

.wrapper02 {
  border-top: 1px solid #eee;
  padding: 0;
}

/*
# .inner
左右に余白を設定
*/
.inner01 {
  padding: 0 10px;
}

/*
# section
sectionとsectionの間に適切な余白を設定するためのスタイル
## セクション1
セクションの境界に広い余白をあけるスタイル .section01
```
<div class="section01">
	<p>コンテンツが入ります。</p>
</div>
<div class="section01">
	<p>コンテンツが入ります。</p>
</div>
```
## セクション2
セクションの境界に狭い余白をあけるスタイル .section02
```
<div class="section02">
	<p>コンテンツが入ります。</p>
</div>
<div class="section02">
	<p>コンテンツが入ります。</p>
</div>
```
*/
.section01 {
  margin-bottom: 60px;
}
.section01:last-child {
  margin-bottom: 0;
}
@media only screen and (max-width: 480px) {
  .section01 {
    margin-bottom: 30px;
  }
}

.section02 {
  margin-bottom: 20px;
}
.section02:last-child {
  margin-bottom: 0;
}

/*
# コンテンツエリア用のcontainer枠
## .container01
通常のコンテナー。最大横幅$cnWで、画面の中央に表示
## .containerPop01
ポップアップ用のコンテナー。最大横幅600pxで、画面の中央に表示
*/
.container01 {
  max-width: 1200px;
  width: auto;
  margin: 60px auto 0;
  padding: 0 10px;
  display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
@media only screen and (max-width: 480px) {
  .container01 {
    margin-top: 30px;
  }
}
.container01:first-child {
  margin-top: 0;
}
.container01.noSpace {
  padding: 0;
}
#sub + .container01 {
  clear: both;
  margin-top: 0;
  padding-top: 60px;
}
@media only screen and (max-width: 480px) {
  #sub + .container01 {
    padding-top: 30px;
  }
}
.container01 .btnWrap {
  display: flex;
  justify-content: center;
}
@media only screen and (max-width: 767px) {
  .container01 .btnWrap {
    flex-direction: column;
    align-items: center;
  }
}
.container01 .btnWrap .entry {
  margin: 0;
}
.container01 .btnWrap .contact {
  margin: 0 40px 0 0;
}
@media only screen and (max-width: 767px) {
  .container01 .btnWrap .contact {
    margin: 0 0 20px 0;
  }
}

.containerPop01 {
  max-width: 600px;
  width: auto;
  margin: 0 auto;
  padding: 60px 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
@media only screen and (max-width: 480px) {
  .containerPop01 {
    padding: 30px 10px;
  }
}

/*
# .boxContent01
画像とテキストのレイアウトセット `.boxContent01`

画像とテキストを縦に並べて表示します
## 画像を上に表示
```
<div class="boxContent01">
	<div class="boxImg">
		<img src="/img/dummy/img01.gif">
	</div>
	<div class="boxTxt">
		<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
	</div>
</div>
```
## 画像を下に表示
```
<div class="boxContent01">
	<div class="boxTxt">
		<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
	</div>
	<div class="boxImg">
		<img src="/img/dummy/img01.gif">
	</div>
</div>
```
## 画像用のクラスを併用して画像のオリジナルサイズを保つことも
```
<div class="boxContent01">
	<div class="boxImg boxImg01">
		<img src="/img/dummy/thumb01.gif">
	</div>
	<div class="boxTxt">
		<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
	</div>
</div>
```
*/
.boxContent03, .boxContent02, .boxContent01 {
  width: auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.boxContent01 > .boxImg {
  margin: 20px 0;
}
.boxContent01 > .boxImg:first-child {
  margin-top: 0;
}
.boxContent01 > .boxImg:last-child {
  margin-bottom: 0;
}
.boxContent01 > .boxTxt {
  padding: 0 10px;
}

/*
# .boxContent02
画像とテキストのレイアウトセット `.boxContent02`

画像とテキストを3:7で並べて表示します
```
<div class="boxContent02">
	<div class="boxImg">
		<img src="/img/dummy/thumb01.gif">
	</div>
	<div class="boxTxt">
		<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
	</div>
</div>
```
## 位置を入れ替え
継承クラス `.reverse`
```
<div class="boxContent02 reverse">
	<div class="boxImg">
		<img src="/img/dummy/thumb01.gif">
	</div>
	<div class="boxTxt">
		<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
	</div>
</div>
```
## スマートフォンで1列表示
継承クラス `.type01`,`.type02`
### .type01
```
<div class="boxContent02 type01">
	<div class="boxImg">
		<img src="/img/dummy/thumb01.gif">
	</div>
	<div class="boxTxt">
		<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
	</div>
</div>
```
### .type02
画像の最大横幅$cnW*0.3
```
<div class="boxContent02 type02">
	<div class="boxImg">
		<img src="/img/dummy/thumb01.gif">
	</div>
	<div class="boxTxt">
		<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
	</div>
</div>
```
*/
.boxContent02 > .boxImg {
  width: 30%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
}
.boxContent02 > .boxTxt {
  width: 70%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 0 0 20px;
  float: right;
}
.boxContent02.reverse > .boxImg {
  float: right;
}
.boxContent02.reverse > .boxTxt {
  float: left;
  padding: 0 20px 0 0;
}
@media only screen and (max-width: 767px) {
  .boxContent02 {
    /* 一列表示、画像100％ */
    /* 一列表示、画像最大サイズ設定あり */
  }
  .boxContent02.type01 > .boxImg, .boxContent02.type01 > .boxTxt, .boxContent02.type01.reverse > .boxImg, .boxContent02.type01.reverse > .boxTxt, .boxContent02.type02 > .boxImg, .boxContent02.type02 > .boxTxt, .boxContent02.type02.reverse > .boxImg, .boxContent02.type02.reverse > .boxTxt {
    float: none;
    width: auto;
  }
  .boxContent02.type01 > .boxImg, .boxContent02.type01.reverse > .boxImg, .boxContent02.type02 > .boxImg, .boxContent02.type02.reverse > .boxImg {
    margin: 20px auto;
  }
  .boxContent02.type01 > .boxImg:first-child, .boxContent02.type01.reverse > .boxImg:first-child, .boxContent02.type02 > .boxImg:first-child, .boxContent02.type02.reverse > .boxImg:first-child {
    margin-top: 0;
  }
  .boxContent02.type01 > .boxImg:last-child, .boxContent02.type01.reverse > .boxImg:last-child, .boxContent02.type02 > .boxImg:last-child, .boxContent02.type02.reverse > .boxImg:last-child {
    margin-bottom: 0;
  }
  .boxContent02.type01 > .boxTxt, .boxContent02.type01.reverse > .boxTxt, .boxContent02.type02 > .boxTxt, .boxContent02.type02.reverse > .boxTxt {
    padding: 0;
  }
  .boxContent02.type02 > .boxImg, .boxContent02.type02.reverse > .boxImg {
    max-width: 360px;
  }
}

/*
# .boxContent03
画像とテキストのレイアウトセット `.boxContent03`

画像とテキストを1:1で並べて表示します
```
<div class="boxContent03">
	<div class="boxImg">
		<img src="/img/dummy/img01.gif">
	</div>
	<div class="boxTxt">
		<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
	</div>
</div>
```
## 位置を入れ替え
継承クラス `.reverse`
```
<div class="boxContent03 reverse">
	<div class="boxImg">
		<img src="/img/dummy/img01.gif">
	</div>
	<div class="boxTxt">
		<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
	</div>
</div>
```
## スマートフォンで1列表示
継承クラス `.type01`,`.type02`
### .type01
```
<div class="boxContent03 type01">
	<div class="boxImg">
		<img src="/img/dummy/img01.gif">
	</div>
	<div class="boxTxt">
		<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
	</div>
</div>
```
### .type02
画像の最大横幅($cnW*0.5) - $spaceS
```
<div class="boxContent03 type02">
	<div class="boxImg">
		<img src="/img/dummy/img01.gif">
	</div>
	<div class="boxTxt">
		<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
	</div>
</div>
```
*/
.boxContent03 > .boxImg, .boxContent03 > .boxTxt {
  width: 50%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.boxContent03 > .boxImg {
  float: left;
  padding: 0 10px 0 0;
}
.boxContent03 > .boxTxt {
  padding: 0 0 0 10px;
  float: right;
}
.boxContent03.reverse > .boxImg {
  float: right;
  padding: 0 0 0 10px;
}
.boxContent03.reverse > .boxTxt {
  float: left;
  padding: 0 10px 0 0;
}
@media only screen and (max-width: 767px) {
  .boxContent03 {
    /* 一列表示、画像100％ */
    /* 一列表示、画像最大サイズ設定あり */
  }
  .boxContent03.type01 > .boxImg, .boxContent03.type01 > .boxTxt, .boxContent03.type01.reverse > .boxImg, .boxContent03.type01.reverse > .boxTxt, .boxContent03.type02 > .boxImg, .boxContent03.type02 > .boxTxt, .boxContent03.type02.reverse > .boxImg, .boxContent03.type02.reverse > .boxTxt {
    float: none;
    width: auto;
  }
  .boxContent03.type01 > .boxImg, .boxContent03.type01.reverse > .boxImg, .boxContent03.type02 > .boxImg, .boxContent03.type02.reverse > .boxImg {
    padding: 0;
    margin: 20px auto;
  }
  .boxContent03.type01 > .boxImg:first-child, .boxContent03.type01.reverse > .boxImg:first-child, .boxContent03.type02 > .boxImg:first-child, .boxContent03.type02.reverse > .boxImg:first-child {
    margin-top: 0;
  }
  .boxContent03.type01 > .boxImg:last-child, .boxContent03.type01.reverse > .boxImg:last-child, .boxContent03.type02 > .boxImg:last-child, .boxContent03.type02.reverse > .boxImg:last-child {
    margin-bottom: 0;
  }
  .boxContent03.type01 > .boxTxt, .boxContent03.type01.reverse > .boxTxt, .boxContent03.type02 > .boxTxt, .boxContent03.type02.reverse > .boxTxt {
    padding: 0;
  }
  .boxContent03.type02 > .boxImg, .boxContent03.type02.reverse > .boxImg {
    max-width: 590px;
  }
}

/*
# boxListシリーズの共通設定
*/
/* %boxList */
.boxList05, .boxList04, .boxList03, .boxList02, .boxList01 {
  width: auto;
}
.boxList05 > a.boxContent, .boxList04 > a.boxContent, .boxList03 > a.boxContent, .boxList02 > a.boxContent, .boxList01 > a.boxContent {
  text-decoration: none;
  color: #666;
}
.boxList05 > .boxContent > .boxInner, .boxList04 > .boxContent > .boxInner, .boxList03 > .boxContent > .boxInner, .boxList02 > .boxContent > .boxInner, .boxList01 > .boxContent > .boxInner {
  padding: 10px;
  border: 1px solid #eee;
  display: block;
}
.boxList05 > .boxContent > a.boxInner, .boxList04 > .boxContent > a.boxInner, .boxList03 > .boxContent > a.boxInner, .boxList02 > .boxContent > a.boxInner, .boxList01 > .boxContent > a.boxInner {
  text-decoration: none;
}

/* %boxListImg */
.boxList03 > .boxContent > .boxImg, .boxList03 > .boxContent > .boxInner > .boxImg, .boxList02 > .boxContent > .boxImg, .boxList02 > .boxContent > .boxInner > .boxImg, .boxList01 > .boxContent > .boxImg, .boxList01 > .boxContent > .boxInner > .boxImg {
  margin: 10px auto;
}
.boxList03 > .boxContent > .boxImg:first-child, .boxList03 > .boxContent > .boxInner > .boxImg:first-child, .boxList02 > .boxContent > .boxImg:first-child, .boxList02 > .boxContent > .boxInner > .boxImg:first-child, .boxList01 > .boxContent > .boxImg:first-child, .boxList01 > .boxContent > .boxInner > .boxImg:first-child {
  margin-top: 0;
}
.boxList03 > .boxContent > .boxImg:last-child, .boxList03 > .boxContent > .boxInner > .boxImg:last-child, .boxList02 > .boxContent > .boxImg:last-child, .boxList02 > .boxContent > .boxInner > .boxImg:last-child, .boxList01 > .boxContent > .boxImg:last-child, .boxList01 > .boxContent > .boxInner > .boxImg:last-child {
  margin-bottom: 0;
}

/* %boxListTxt */
.boxList03 > .boxContent > .boxTxt, .boxList03 > .boxContent > .boxInner > .boxTxt, .boxList02 > .boxContent > .boxTxt, .boxList02 > .boxContent > .boxInner > .boxTxt, .boxList01 > .boxContent > .boxTxt, .boxList01 > .boxContent > .boxInner > .boxTxt {
  padding: 0 10px;
}

/* @mixin boxContentSp01 (スマホでの1列表示) */
/* @mixin boxContentSp02 (画像とテキストの並列表示) */
/*
# .boxList01

コンテンツの2列表示`.boxList01`

```
<div class="inner01">
	<div class="boxList01">
		<div class="boxContent">
			<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
			<div class="boxTxt">
				<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</div>
		</div>
		<div class="boxContent">
			<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
			<div class="boxTxt">
				<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</div>
		</div>
	</div>
</div>

```
##　各コンテンツを囲むdivを追加
子クラス `.boxInner`
```
<div class="inner01">
	<div class="boxList01">
		<div class="boxContent">
			<div class="boxInner">
				<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
				<div class="boxTxt">
					<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
				</div>
			</div>
		</div>
		<div class="boxContent">
			<div class="boxInner">
				<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
				<div class="boxTxt">
					<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
				</div>
			</div>
		</div>
	</div>
</div>
```
## スマホレイアウト
継承クラス `.type01` コンテンツを1列で表示
継承クラス `.type02` コンテンツを1列で表示、画像とテキストを1:1で並列表示
```
<div class="inner01">
	<h2 class="titBasic03">.boxList01 && .type01</h2>
	<div class="boxList01 type01">
		<div class="boxContent">
			<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
			<div class="boxTxt">
				<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</div>
		</div>
		<div class="boxContent">
			<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
			<div class="boxTxt">
				<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</div>
		</div>
	</div>
	<h2 class="titBasic03">.boxList01 && .type02</h2>
	<div class="boxList01 type02">
		<div class="boxContent">
			<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
			<div class="boxTxt">
				<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</div>
		</div>
		<div class="boxContent">
			<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
			<div class="boxTxt">
				<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</div>
		</div>
	</div>
</div>
```
*/
.boxList01 {
  /*スマホレイアウトバリエーション*/
}
.boxList01 > .boxContent {
  width: 50%;
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
}
.boxList01 > .boxContent:nth-child(n+3) {
  margin-top: 60px;
}
@media only screen and (max-width: 480px) {
  .boxList01 > .boxContent:nth-child(n+3) {
    margin-top: 30px;
  }
}
.boxList01 > .boxContent:nth-child(odd) {
  clear: both;
  padding-right: 10px;
}
.boxList01 > .boxContent:nth-child(even) {
  padding-left: 10px;
}
.boxList01 > .boxContent > .boxImg, .boxList01 > .boxContent > .boxInner > .boxImg {
  max-width: 580px;
}
@media only screen and (max-width: 767px) {
  .boxList01 {
    /*1列表示*/
    /*/.type01*/
    /*1列表示、画像とテキストを1:1で並列表示*/
  }
  .boxList01.type01 > .boxContent {
    width: 100%;
    float: none;
  }
  .boxList01.type01 > .boxContent:nth-child(n+2) {
    margin-top: 60px !important;
  }
}
@media only screen and (max-width: 767px) and (max-width: 480px) {
  .boxList01.type01 > .boxContent:nth-child(n+2) {
    margin-top: 30px !important;
  }
}
@media only screen and (max-width: 767px) {
  .boxList01.type01 > .boxContent:nth-child(odd) {
    padding-right: 0;
  }
  .boxList01.type01 > .boxContent:nth-child(even) {
    padding-left: 0;
  }
  .boxList01.type02 > .boxContent {
    display: table;
    width: 100%;
  }
  .boxList01.type02 > .boxContent:nth-child(n+2) {
    margin-top: 20px !important;
  }
  .boxList01.type02 > .boxContent > .boxImg, .boxList01.type02 > .boxContent > .boxTxt, .boxList01.type02 > .boxContent > .boxInner > .boxImg, .boxList01.type02 > .boxContent > .boxInner > .boxTxt {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: table-cell;
  }
  .boxList01.type02 > .boxContent > .boxImg, .boxList01.type02 > .boxContent > .boxInner > .boxImg {
    vertical-align: top;
  }
  .boxList01.type02 > .boxContent > .boxTxt, .boxList01.type02 > .boxContent > .boxInner > .boxTxt {
    padding-left: 0 0 0 10px;
    vertical-align: middle;
  }
  .boxList01.type02 > .boxContent:nth-child(odd) {
    padding-right: 0;
  }
  .boxList01.type02 > .boxContent:nth-child(even) {
    padding-left: 0;
  }
  .boxList01.type02 > .boxContent > .boxImg, .boxList01.type02 > .boxContent > .boxInner > .boxImg {
    width: 50%;
  }
}

/*
# .boxList02

コンテンツの3列表示`.boxList02`

```
<div class="inner01">
	<div class="boxList02">
		<div class="boxContent">
			<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
			<div class="boxTxt">
				<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</div>
		</div>
		<div class="boxContent">
			<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
			<div class="boxTxt">
				<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</div>
		</div>
		<div class="boxContent">
			<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
			<div class="boxTxt">
				<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</div>
		</div>
	</div>
</div>

```
##　各コンテンツを囲むdivを追加
子クラス `.boxInner`
```
<div class="inner01">
	<div class="boxList02">
		<div class="boxContent">
			<div class="boxInner">
				<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
				<div class="boxTxt">
					<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
				</div>
			</div>
		</div>
		<div class="boxContent">
			<div class="boxInner">
				<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
				<div class="boxTxt">
					<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
				</div>
			</div>
		</div>
		<div class="boxContent">
			<div class="boxInner">
				<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
				<div class="boxTxt">
					<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
				</div>
			</div>
		</div>
	</div>
</div>
```
## スマホレイアウト
継承クラス `.type01` コンテンツを1列で表示
継承クラス `.type02` コンテンツを1列で表示、画像とテキストを1:1で並列表示
```
<div class="inner01">
	<h2 class="titBasic03">.boxList02 && .type01</h2>
	<div class="boxList02 type01">
		<div class="boxContent">
			<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
			<div class="boxTxt">
				<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</div>
		</div>
		<div class="boxContent">
			<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
			<div class="boxTxt">
				<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</div>
		</div>
		<div class="boxContent">
			<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
			<div class="boxTxt">
				<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</div>
		</div>
	</div>
	<h2 class="titBasic03">.boxList02 && .type02</h2>
	<div class="boxList02 type02">
		<div class="boxContent">
			<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
			<div class="boxTxt">
				<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</div>
		</div>
		<div class="boxContent">
			<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
			<div class="boxTxt">
				<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</div>
		</div>
		<div class="boxContent">
			<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
			<div class="boxTxt">
				<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</div>
		</div>
	</div>
</div>
```
*/
.boxList02 {
  /*.boxContent*/
  /*スマホレイアウトバリエーション*/
}
.boxList02 > .boxContent {
  width: 33.33333%;
  float: left;
  padding: 0 10px;
  display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
@media only screen and (max-width: 767px) {
  .boxList02 > .boxContent {
    width: 100%;
    float: none;
  }
  .boxList02 > .boxContent:nth-child(n+2) {
    margin-top: 60px !important;
  }
}
@media only screen and (max-width: 767px) and (max-width: 480px) {
  .boxList02 > .boxContent:nth-child(n+2) {
    margin-top: 30px !important;
  }
}
.boxList02 > .boxContent:nth-child(3n+1) {
  clear: both;
}
.boxList02 > .boxContent:nth-child(n+4) {
  margin-top: 60px;
}
@media only screen and (max-width: 767px) {
  .boxList02 > .boxContent > .boxImg, .boxList02 > .boxContent > .boxInner > .boxImg {
    max-width: 380px;
  }
}
@media only screen and (max-width: 767px) {
  .boxList02 {
    /* 画像を横100%表示。スマホでは767pxの画像を用意すること。 */
    /* 画像とテキストを1:2で並列表示; */
    /*/.type02*/
  }
  .boxList02.type01 > .boxContent > .boxImg, .boxList02.type01 > .boxContent > .boxInner > .boxImg {
    width: 100%;
    max-width: none;
  }
  .boxList02.type02 > .boxContent {
    display: table;
    width: 100%;
  }
  .boxList02.type02 > .boxContent:nth-child(n+2) {
    margin-top: 20px !important;
  }
  .boxList02.type02 > .boxContent > .boxImg, .boxList02.type02 > .boxContent > .boxTxt, .boxList02.type02 > .boxContent > .boxInner > .boxImg, .boxList02.type02 > .boxContent > .boxInner > .boxTxt {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: table-cell;
  }
  .boxList02.type02 > .boxContent > .boxImg, .boxList02.type02 > .boxContent > .boxInner > .boxImg {
    vertical-align: top;
  }
  .boxList02.type02 > .boxContent > .boxTxt, .boxList02.type02 > .boxContent > .boxInner > .boxTxt {
    padding-left: 0 0 0 10px;
    vertical-align: middle;
  }
  .boxList02.type02 > .boxContent > .boxImg, .boxList02.type02 > .boxContent > .boxInner > .boxImg {
    width: 25%;
    margin: 0;
  }
}

/*
# .boxList03

コンテンツの4列表示`.boxList03`
※スマホでは2列表示
```
<div class="inner01">
	<div class="boxList03">
		<div class="boxContent">
			<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
			<div class="boxTxt">
				<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</div>
		</div>
		<div class="boxContent">
			<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
			<div class="boxTxt">
				<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</div>
		</div>
		<div class="boxContent">
			<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
			<div class="boxTxt">
				<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</div>
		</div>
		<div class="boxContent">
			<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
			<div class="boxTxt">
				<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</div>
		</div>
	</div>
</div>

```
##　各コンテンツを囲むdivを追加
子クラス `.boxInner`
```
<div class="inner01">
	<div class="boxList03">
		<div class="boxContent">
			<div class="boxInner">
				<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
				<div class="boxTxt">
					<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
				</div>
			</div>
		</div>
		<div class="boxContent">
			<div class="boxInner">
				<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
				<div class="boxTxt">
					<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
				</div>
			</div>
		</div>
		<div class="boxContent">
			<div class="boxInner">
				<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
				<div class="boxTxt">
					<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
				</div>
			</div>
		</div>
		<div class="boxContent">
			<div class="boxInner">
				<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
				<div class="boxTxt">
					<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
				</div>
			</div>
		</div>
	</div>
</div>
```
## スマホレイアウト1
継承クラス `.type01` コンテンツを1列で表示
継承クラス `.type02` コンテンツを1列で表示、画像とテキストを1:3で並列表示
```
<div class="inner01">
	<h2 class="titBasic03">.boxList03 && .type01</h2>
	<div class="boxList03 type01">
		<div class="boxContent">
			<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
			<div class="boxTxt">
				<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</div>
		</div>
		<div class="boxContent">
			<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
			<div class="boxTxt">
				<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</div>
		</div>
		<div class="boxContent">
			<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
			<div class="boxTxt">
				<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</div>
		</div>
		<div class="boxContent">
			<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
			<div class="boxTxt">
				<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</div>
		</div>
	</div>
	<h2 class="titBasic03">.boxList03 && .type02</h2>
	<div class="boxList03 type02">
		<div class="boxContent">
			<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
			<div class="boxTxt">
				<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</div>
		</div>
		<div class="boxContent">
			<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
			<div class="boxTxt">
				<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</div>
		</div>
		<div class="boxContent">
			<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
			<div class="boxTxt">
				<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</div>
		</div>
		<div class="boxContent">
			<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
			<div class="boxTxt">
				<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</div>
		</div>
	</div>
</div>
```
*/
.boxList03 {
  /*スマホレイアウトバリエーション*/
}
.boxList03 > .boxContent {
  width: 25%;
  float: left;
  padding: 0 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
}
.boxList03 > .boxContent:nth-child(n+5) {
  margin-top: 20px;
}
.boxList03 > .boxContent:nth-child(4n+1) {
  clear: both;
}
@media only screen and (max-width: 767px) {
  .boxList03 > .boxContent {
    width: 50%;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }
  .boxList03 > .boxContent:nth-child(n+3) {
    margin-top: 20px;
  }
  .boxList03 > .boxContent:nth-child(odd) {
    clear: both;
  }
}
@media only screen and (max-width: 767px) {
  .boxList03 {
    /* 一列表示 */
    /*/.type01*/
    /* 一列表示、画像とテキストを1:3で並列表示; */
    /*/.type02*/
  }
  .boxList03.type01 > .boxContent {
    width: 100%;
    float: none;
  }
  .boxList03.type01 > .boxContent:nth-child(n+2) {
    margin-top: 60px !important;
  }
}
@media only screen and (max-width: 767px) and (max-width: 480px) {
  .boxList03.type01 > .boxContent:nth-child(n+2) {
    margin-top: 30px !important;
  }
}
@media only screen and (max-width: 767px) {
  .boxList03.type02 > .boxContent {
    display: table;
    width: 100%;
  }
  .boxList03.type02 > .boxContent:nth-child(n+2) {
    margin-top: 20px !important;
  }
  .boxList03.type02 > .boxContent > .boxImg, .boxList03.type02 > .boxContent > .boxTxt, .boxList03.type02 > .boxContent > .boxInner > .boxImg, .boxList03.type02 > .boxContent > .boxInner > .boxTxt {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: table-cell;
  }
  .boxList03.type02 > .boxContent > .boxImg, .boxList03.type02 > .boxContent > .boxInner > .boxImg {
    vertical-align: top;
  }
  .boxList03.type02 > .boxContent > .boxTxt, .boxList03.type02 > .boxContent > .boxInner > .boxTxt {
    padding-left: 0 0 0 10px;
    vertical-align: middle;
  }
  .boxList03.type02 > .boxContent:nth-child(even), .boxList03.type02 > .boxContent:nth-child(odd) {
    padding: 0;
  }
  .boxList03.type02 > .boxContent > .boxImg, .boxList03.type02 > .boxContent > .boxInner > .boxImg {
    width: 25%;
  }
}

/*
# .boxList04

コンテンツの2列表示`.boxList04`
画像とテキストは並列表示
```
<div class="inner01">
	<div class="boxList04">
		<div class="boxContent">
			<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
			<div class="boxTxt">
				<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</div>
		</div>
		<div class="boxContent">
			<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
			<div class="boxTxt">
				<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</div>
		</div>
	</div>
</div>

```
## 画像とテキストの並びを反転
継承クラス `.reverse`
```
<div class="inner01">
	<div class="boxList04 reverse">
		<div class="boxContent">
			<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
			<div class="boxTxt">
				<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</div>
		</div>
		<div class="boxContent">
			<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
			<div class="boxTxt">
				<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</div>
		</div>
	</div>
</div>

```
##　各コンテンツを囲むdivを追加
子クラス `.boxInner`
```
<div class="inner01">
	<div class="boxList04">
		<div class="boxContent">
			<div class="boxInner">
				<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
				<div class="boxTxt">
					<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
				</div>
			</div>
		</div>
		<div class="boxContent">
			<div class="boxInner">
				<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
				<div class="boxTxt">
					<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
				</div>
			</div>
		</div>
	</div>
</div>
```
## スマホレイアウト1
継承クラス `.type01` コンテンツを1列で表示
継承クラス `.type02` コンテンツを1列で表示、画像とテキストを1:3で並列表示
```
<div class="inner01">
	<h2 class="titBasic03">.boxList04 && .type01</h2>
	<div class="boxList04 type01">
		<div class="boxContent">
			<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
			<div class="boxTxt">
				<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</div>
		</div>
		<div class="boxContent">
			<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
			<div class="boxTxt">
				<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</div>
		</div>
	</div>
	<h2 class="titBasic03">.boxList04 && .type02</h2>
	<div class="boxList04 type02">
		<div class="boxContent">
			<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
			<div class="boxTxt">
				<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</div>
		</div>
		<div class="boxContent">
			<div class="boxImg"><img src="/img/dummy/img01.gif"></div>
			<div class="boxTxt">
				<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</div>
		</div>
	</div>
</div>
```
*/
.boxList04 {
  /* 画像とテキストの位置を逆転 */
  /*スマホレイアウトバリエーション*/
}
.boxList04 > .boxContent {
  width: 50%;
  float: left;
  display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.boxList04 > .boxContent:nth-child(odd) {
  padding-right: 10px;
  clear: both;
}
.boxList04 > .boxContent:nth-child(even) {
  padding-left: 10px;
}
.boxList04 > .boxContent:nth-child(n+3) {
  margin-top: 20px;
}
.boxList04 > .boxContent > .boxImg, .boxList04 > .boxContent > .boxInner > .boxImg {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  width: 50%;
  padding-right: 5px;
}
@media only screen and (max-width: 767px) {
  .boxList04 > .boxContent > .boxImg, .boxList04 > .boxContent > .boxInner > .boxImg {
    width: auto;
    max-width: 290px;
    float: none;
    margin: 20px auto;
  }
  .boxList04 > .boxContent > .boxImg:first-child, .boxList04 > .boxContent > .boxInner > .boxImg:first-child {
    margin-top: 0;
  }
  .boxList04 > .boxContent > .boxImg:last-child, .boxList04 > .boxContent > .boxInner > .boxImg:last-child {
    margin-bottom: 0;
  }
}
.boxList04 > .boxContent > .boxTxt, .boxList04 > .boxContent > .boxInner > .boxTxt {
  margin-left: 50%;
  padding-left: 5px;
}
@media only screen and (max-width: 767px) {
  .boxList04 > .boxContent > .boxTxt, .boxList04 > .boxContent > .boxInner > .boxTxt {
    margin-left: 0;
    padding: 0 10px;
  }
}
.boxList04.reverse > .boxContent > .boxImg, .boxList04.reverse > .boxContent > .boxInner > .boxImg {
  float: right;
  padding-right: 0;
  padding-left: 5px;
}
@media only screen and (max-width: 767px) {
  .boxList04.reverse > .boxContent > .boxImg, .boxList04.reverse > .boxContent > .boxInner > .boxImg {
    float: none;
  }
}
.boxList04.reverse > .boxContent > .boxTxt, .boxList04.reverse > .boxContent > .boxInner > .boxTxt {
  margin-left: 0;
  margin-right: 50%;
  padding-left: 0;
  padding-right: 5px;
}
@media only screen and (max-width: 767px) {
  .boxList04.reverse > .boxContent > .boxTxt, .boxList04.reverse > .boxContent > .boxInner > .boxTxt {
    margin-right: 0;
    padding: 0 10px;
  }
}
@media only screen and (max-width: 767px) {
  .boxList04 {
    /* 一列表示 */
    /*/.type01*/
    /*/.type02*/
  }
  .boxList04.type01 > .boxContent {
    width: 100%;
    float: none;
  }
  .boxList04.type01 > .boxContent:nth-child(n+2) {
    margin-top: 60px !important;
  }
}
@media only screen and (max-width: 767px) and (max-width: 480px) {
  .boxList04.type01 > .boxContent:nth-child(n+2) {
    margin-top: 30px !important;
  }
}
@media only screen and (max-width: 767px) {
  .boxList04.type01 > .boxContent:nth-child(even), .boxList04.type01 > .boxContent:nth-child(odd) {
    padding: 0;
  }
  .boxList04.type01 > .boxContent > .boxImg, .boxList04.type01 > .boxContent > .boxInner > .boxImg {
    float: none;
  }
  .boxList04.type02 > .boxContent {
    display: table;
    width: 100%;
  }
  .boxList04.type02 > .boxContent:nth-child(n+2) {
    margin-top: 20px !important;
  }
  .boxList04.type02 > .boxContent > .boxImg, .boxList04.type02 > .boxContent > .boxTxt, .boxList04.type02 > .boxContent > .boxInner > .boxImg, .boxList04.type02 > .boxContent > .boxInner > .boxTxt {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: table-cell;
  }
  .boxList04.type02 > .boxContent > .boxImg, .boxList04.type02 > .boxContent > .boxInner > .boxImg {
    vertical-align: top;
  }
  .boxList04.type02 > .boxContent > .boxTxt, .boxList04.type02 > .boxContent > .boxInner > .boxTxt {
    padding-left: 0 0 0 10px;
    vertical-align: middle;
  }
  .boxList04.type02 > .boxContent:nth-child(even), .boxList04.type02 > .boxContent:nth-child(odd) {
    padding: 0;
  }
  .boxList04.type02 > .boxContent > .boxImg, .boxList04.type02 > .boxContent > .boxInner > .boxImg {
    width: 25%;
    padding: 0;
  }
  .boxList04.type02.reverse > .boxContent {
    display: block;
  }
  .boxList04.type02.reverse > .boxContent > .boxImg, .boxList04.type02.reverse > .boxContent > .boxTxt, .boxList04.type02.reverse > .boxContent > .boxInner > .boxImg, .boxList04.type02.reverse > .boxContent > .boxInner > .boxTxt {
    display: block;
  }
  .boxList04.type02.reverse > .boxContent .boxTxt, .boxList04.type02.reverse > .boxContent > .boxInner > .boxTxt {
    padding: 0 10px 0 0;
    margin-right: 25%;
  }
}

/*
# .boxList05
コンテンツの3列表示`.boxList05`
画像とテキストは並列表示
```
<div class="inner01">
	<div class="boxList05">
		<div class="boxContent">
			<div class="boxInner">
				<div class="boxImg"><img src="/img/dummy/thumb01.gif"></div>
				<div class="boxTxt">
					<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
				</div>
			</div>
		</div>
		<div class="boxContent">
			<div class="boxInner">
				<div class="boxImg"><img src="/img/dummy/thumb01.gif"></div>
				<div class="boxTxt">
					<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
				</div>
			</div>
		</div>
		<div class="boxContent">
			<div class="boxInner">
				<div class="boxImg"><img src="/img/dummy/thumb01.gif"></div>
				<div class="boxTxt">
					<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
				</div>
			</div>
		</div>
	</div>
</div>
```
*/
.boxList05 > .boxContent {
  display: block;
  width: 33.33333%;
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 10px;
}
.boxList05 > .boxContent:nth-child(3n+1) {
  clear: both;
}
.boxList05 > .boxContent:nth-child(n+4) {
  margin-top: 20px;
}
@media only screen and (max-width: 767px) {
  .boxList05 > .boxContent {
    width: 100%;
    margin: 0 0 20px !important;
  }
  .boxList05 > .boxContent:last-child {
    margin-bottom: 0 !important;
  }
}
.boxList05 > .boxContent > .boxInner {
  display: table;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.boxList05 > .boxContent > .boxInner > .boxImg {
  width: 20%;
  display: table-cell;
  vertical-align: top;
}
@media only screen and (max-width: 480px) {
  .boxList05 > .boxContent > .boxInner > .boxImg {
    /*width: $imgW/2;*/
  }
}
.boxList05 > .boxContent > .boxInner > .boxTxt {
  padding-left: 10px;
  display: table-cell;
  vertical-align: middle;
}
@media only screen and (max-width: 480px) {
  .boxList05 > .boxContent > .boxInner > .boxTxt {
    /*margin-left: $imgW/2;*/
  }
}

/*/.boxList05*/
/*
# .boxFlexContent01

コンテンツの配置をフレキシブルに変更可能なクラス `.boxFlexContent01`
デフォルトでは画像とテキストを2:3で配置
継承クラス`.reverse`でコンテンツの横方向の並び順を逆転させます。
```
<div class="boxFlexContent01">
	<div class="boxImg">
		<img src="/img/dummy/img01.gif">
	</div>
	<div class="boxTxt">
		<p>テキストが入ります。<br>テキストが入ります。テキストが入ります。</p>
	</div>
</div>
<div class="boxFlexContent01 reverse">
	<div class="boxImg">
		<img src="/img/dummy/img01.gif">
	</div>
	<div class="boxTxt">
		<p>テキストが入ります。<br>テキストが入ります。テキストが入ります。</p>
	</div>
</div>

```
## 継承クラス `.type01`
画像とテキストを1：1で配置
```
<div class="boxFlexContent01 type01">
	<div class="boxImg">
		<img src="/img/dummy/img01.gif">
	</div>
	<div class="boxTxt">
		<p>テキストが入ります。<br>テキストが入ります。テキストが入ります。</p>
	</div>
</div>
<div class="boxFlexContent01 type01 reverse">
	<div class="boxImg">
		<img src="/img/dummy/img01.gif">
	</div>
	<div class="boxTxt">
		<p>テキストが入ります。<br>テキストが入ります。テキストが入ります。</p>
	</div>
</div>

```
## 継承クラス `.type02`
画像とテキストを3：2で配置
```
<div class="boxFlexContent01 type02">
	<div class="boxImg">
		<img src="/img/dummy/img01.gif">
	</div>
	<div class="boxTxt">
		<p>テキストが入ります。<br>テキストが入ります。テキストが入ります。</p>
	</div>
</div>
<div class="boxFlexContent01 type02 reverse">
	<div class="boxImg">
		<img src="/img/dummy/img01.gif">
	</div>
	<div class="boxTxt">
		<p>テキストが入ります。<br>テキストが入ります。テキストが入ります。</p>
	</div>
</div>

```
*/
.boxFlexContent01 {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  -ms-align-items: center;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
  /*IE9以下*/
  width: 100% \9 ;
  /*/.type01*/
  /*/.type02*/
}
.boxFlexContent01.reverse {
  -ms-flex-direction: row-reverse;
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
@media only screen and (max-width: 767px) {
  .boxFlexContent01 {
    display: block;
  }
}
.boxFlexContent01 > .boxImg {
  width: 40%;
}
@media only screen and (max-width: 767px) {
  .boxFlexContent01 > .boxImg {
    width: 100%;
  }
}
.boxFlexContent01 > .boxTxt {
  width: 60%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  padding: 20px;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .boxFlexContent01 > .boxTxt {
    width: 100%;
    padding: 20px 10px 60px;
  }
}
.boxFlexContent01 > .boxImg, .boxFlexContent01 > .boxTxt {
  display: table-cell\9 ;
  vertical-align: middle\9 ;
}
.boxFlexContent01.type01 > .boxImg, .boxFlexContent01.type01 > .boxTxt {
  width: 50%;
}
@media only screen and (max-width: 767px) {
  .boxFlexContent01.type01 > .boxImg, .boxFlexContent01.type01 > .boxTxt {
    width: 100%;
  }
}
.boxFlexContent01.type02 > .boxImg {
  width: 60%;
}
@media only screen and (max-width: 767px) {
  .boxFlexContent01.type02 > .boxImg {
    width: 100%;
  }
}
.boxFlexContent01.type02 > .boxTxt {
  width: 40%;
}
@media only screen and (max-width: 767px) {
  .boxFlexContent01.type02 > .boxTxt {
    width: 100%;
  }
}

/*
# .boxFlexList01

コンテンツのリスト配置をフレキシブルに変更可能なクラス `.boxFlexList01`。
デフォルトでは3列で折り返し。
スマホのデフォルト表示は1列。
```
<div class="boxFlexList01">
	<div class="boxContent">
		<div class="boxImg">
			<img src="/img/dummy/img01.gif">
		</div>
		<div class="boxTxt">
			<p>テキストが入ります。<br>テキストが入ります。テキストが入ります。</p>
		</div>
	</div>
	<div class="boxContent">
		<div class="boxImg">
			<img src="/img/dummy/img01.gif">
		</div>
		<div class="boxTxt">
			<p>テキストが入ります。<br>テキストが入ります。テキストが入ります。</p>
		</div>
	</div>
	<div class="boxContent">
		<div class="boxImg">
			<img src="/img/dummy/img01.gif">
		</div>
		<div class="boxTxt">
			<p>テキストが入ります。<br>テキストが入ります。テキストが入ります。</p>
		</div>
	</div>
</div>

```
## 継承クラス `.row4`
コンテンツを4列で折り返し
```
<div class="boxFlexList01 row4">
	<div class="boxContent">
		<div class="boxImg">
			<img src="/img/dummy/img01.gif">
		</div>
		<div class="boxTxt">
			<p>テキストが入ります。<br>テキストが入ります。テキストが入ります。</p>
		</div>
	</div>
	<div class="boxContent">
		<div class="boxImg">
			<img src="/img/dummy/img01.gif">
		</div>
		<div class="boxTxt">
			<p>テキストが入ります。<br>テキストが入ります。テキストが入ります。</p>
		</div>
	</div>
	<div class="boxContent">
		<div class="boxImg">
			<img src="/img/dummy/img01.gif">
		</div>
		<div class="boxTxt">
			<p>テキストが入ります。<br>テキストが入ります。テキストが入ります。</p>
		</div>
	</div>
	<div class="boxContent">
		<div class="boxImg">
			<img src="/img/dummy/img01.gif">
		</div>
		<div class="boxTxt">
			<p>テキストが入ります。<br>テキストが入ります。テキストが入ります。</p>
		</div>
	</div>
	<div class="boxContent">
		<div class="boxImg">
			<img src="/img/dummy/img01.gif">
		</div>
		<div class="boxTxt">
			<p>テキストが入ります。<br>テキストが入ります。テキストが入ります。</p>
		</div>
	</div>
	<div class="boxContent">
		<div class="boxImg">
			<img src="/img/dummy/img01.gif">
		</div>
		<div class="boxTxt">
			<p>テキストが入ります。<br>テキストが入ります。テキストが入ります。</p>
		</div>
	</div>
</div>

```
## 継承クラス `.type01`
スマホで2列表示
```
<div class="boxFlexList01 type01">
	<div class="boxContent">
		<div class="boxImg">
			<img src="/img/dummy/img01.gif">
		</div>
		<div class="boxTxt">
			<p>テキストが入ります。<br>テキストが入ります。テキストが入ります。</p>
		</div>
	</div>
	<div class="boxContent">
		<div class="boxImg">
			<img src="/img/dummy/img01.gif">
		</div>
		<div class="boxTxt">
			<p>テキストが入ります。<br>テキストが入ります。テキストが入ります。</p>
		</div>
	</div>
	<div class="boxContent">
		<div class="boxImg">
			<img src="/img/dummy/img01.gif">
		</div>
		<div class="boxTxt">
			<p>テキストが入ります。<br>テキストが入ります。テキストが入ります。</p>
		</div>
	</div>
	<div class="boxContent">
		<div class="boxImg">
			<img src="/img/dummy/img01.gif">
		</div>
		<div class="boxTxt">
			<p>テキストが入ります。<br>テキストが入ります。テキストが入ります。</p>
		</div>
	</div>
	<div class="boxContent">
		<div class="boxImg">
			<img src="/img/dummy/img01.gif">
		</div>
		<div class="boxTxt">
			<p>テキストが入ります。<br>テキストが入ります。テキストが入ります。</p>
		</div>
	</div>
	<div class="boxContent">
		<div class="boxImg">
			<img src="/img/dummy/img01.gif">
		</div>
		<div class="boxTxt">
			<p>テキストが入ります。<br>テキストが入ります。テキストが入ります。</p>
		</div>
	</div>
</div>

```
## 継承クラス `.type02`
スマホで1列表示・画像とテキストを1：1で並列表示
```
<div class="boxFlexList01 type02">
	<div class="boxContent">
		<div class="boxImg">
			<img src="/img/dummy/img01.gif">
		</div>
		<div class="boxTxt">
			<p>テキストが入ります。<br>テキストが入ります。テキストが入ります。</p>
		</div>
	</div>
	<div class="boxContent">
		<div class="boxImg">
			<img src="/img/dummy/img01.gif">
		</div>
		<div class="boxTxt">
			<p>テキストが入ります。<br>テキストが入ります。テキストが入ります。</p>
		</div>
	</div>
	<div class="boxContent">
		<div class="boxImg">
			<img src="/img/dummy/img01.gif">
		</div>
		<div class="boxTxt">
			<p>テキストが入ります。<br>テキストが入ります。テキストが入ります。</p>
		</div>
	</div>
</div>

```
*/
.boxFlexList01 {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
@media only screen and (max-width: 767px) {
  .boxFlexList01 {
    display: block;
  }
}
.boxFlexList01 > .boxContent {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  width: 33.33333%;
}
.boxFlexList01 > .boxContent > .boxTxt {
  padding: 10px;
}
.boxFlexList01.row4 > .boxContent {
  width: 25%;
}
@media only screen and (max-width: 767px) {
  .boxFlexList01 .boxContent, .boxFlexList01.row4 > .boxContent {
    width: 100%;
  }
  .boxFlexList01.type01 > .boxContent, .boxFlexList01.row4.type01 > .boxContent {
    width: 50%;
    float: left;
  }
  .boxFlexList01.type02 > .boxContent, .boxFlexList01.row4.type02 > .boxContent {
    width: 100%;
    display: table;
  }
  .boxFlexList01.type02 > .boxContent > .boxInner, .boxFlexList01.row4.type02 > .boxContent > .boxInner {
    display: table-row;
  }
  .boxFlexList01.type02 > .boxContent > .boxInner > .boxImg, .boxFlexList01.type02 > .boxContent > .boxImg, .boxFlexList01.type02 > .boxContent > .boxInner > .boxTxt, .boxFlexList01.type02 > .boxContent > .boxTxt, .boxFlexList01.row4.type02 > .boxContent > .boxInner > .boxImg, .boxFlexList01.row4.type02 > .boxContent > .boxImg, .boxFlexList01.row4.type02 > .boxContent > .boxInner > .boxTxt, .boxFlexList01.row4.type02 > .boxContent > .boxTxt {
    display: table-cell;
    width: 50%;
    vertical-align: middle;
  }
}

/*
# .boxClm01

均等割付のカラムレイアウト

```
<h2 class="titBasic03">ulタグを使ったレイアウト</h2>
<ul class="boxClm01">
	<li>コンテンツ1</li>
	<li>コンテンツ2</li>
	<li>コンテンツ3</li>
</ul>
<h2 class="titBasic03">divタグを使ったレイアウト</h2>
<div class="boxClm01">
	<div class="boxContent">
		<p>コンテンツ1</p>
	</div>
	<div class="boxContent">
		<p>コンテンツ2</p>
	</div>
	<div class="boxContent">
		<p>コンテンツ3</p>
	</div>
</div>

```
## 継承クラス　`.spClm` & `.clm1`
スマホでは1列表示

```
<div class="boxClm01 spClm clm1">
	<div class="boxContent">
		<p>コンテンツ1</p>
	</div>
	<div class="boxContent">
		<p>コンテンツ2</p>
	</div>
	<div class="boxContent">
		<p>コンテンツ3</p>
	</div>
</div>

```

## 継承クラス　`.spClm` & `.clm5`
5カラムのレイアウト。スマホでは3列でおりかえし、センタリング配置

```
<div class="boxClm01 spClm clm5">
	<div class="boxContent">
		<p>コンテンツ1</p>
	</div>
	<div class="boxContent">
		<p>コンテンツ2</p>
	</div>
	<div class="boxContent">
		<p>コンテンツ3</p>
	</div>
	<div class="boxContent">
		<p>コンテンツ2</p>
	</div>
	<div class="boxContent">
		<p>コンテンツ3</p>
	</div>
</div>

```
## 継承クラス　`.spClm` & `.clm4`
4カラムのレイアウト。スマホでは2列でおりかえし

```
<div class="boxClm01 spClm clm4">
	<div class="boxContent">
		<p>コンテンツ1</p>
	</div>
	<div class="boxContent">
		<p>コンテンツ2</p>
	</div>
	<div class="boxContent">
		<p>コンテンツ3</p>
	</div>
	<div class="boxContent">
		<p>コンテンツ3</p>
	</div>
</div>

```
*/
.boxClm01 {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.boxClm01 > li, .boxClm01 > .boxContent {
  display: table-cell;
  vertical-align: top;
  text-align: center;
  padding: 0 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
@media only screen and (max-width: 767px) {
  .boxClm01.spClm {
    display: block;
    text-align: center;
  }
  .boxClm01.spClm:after {
    clear: both;
    display: block;
    content: "";
  }
  .boxClm01.spClm > li, .boxClm01.spClm > .boxContent {
    display: block;
    float: left;
  }
  .boxClm01.spClm > li .boxImg, .boxClm01.spClm > .boxContent .boxImg {
    width: auto;
  }
}
@media only screen and (max-width: 767px) {
  .boxClm01.clm1 > li, .boxClm01.clm1 > .boxContent {
    width: 100%;
    float: none;
  }
  .boxClm01.clm1 > li:nth-child(n+1), .boxClm01.clm1 > .boxContent:nth-child(n+1) {
    margin-top: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .boxClm01.clm5 > li, .boxClm01.clm5 > .boxContent {
    width: 33.33333%;
  }
  .boxClm01.clm5 > li:nth-child(3n+1), .boxClm01.clm5 > .boxContent:nth-child(3n+1) {
    clear: both;
    margin-left: 16.666%;
  }
  .boxClm01.clm5 > li:first-child, .boxClm01.clm5 > .boxContent:first-child {
    margin-left: 0 !important;
  }
  .boxClm01.clm5 > li:nth-child(n+4), .boxClm01.clm5 > .boxContent:nth-child(n+4) {
    margin-top: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .boxClm01.clm4 > li, .boxClm01.clm4 > .boxContent {
    width: 50%;
  }
  .boxClm01.clm4 > li:nth-child(odd), .boxClm01.clm4 > .boxContent:nth-child(odd) {
    clear: both;
  }
  .boxClm01.clm4 > li:nth-child(n+3), .boxClm01.clm4 > .boxContent:nth-child(n+3) {
    margin-top: 20px;
  }
}

/*
# デザインパターン1

継承クラス　`.style01`
## 継承元
* .boxList01
* .boxList02
* .boxList03
* .boxList04
* .boxList05

```
<div class="boxList02 style01">
	<div class="boxContent">
		<div class="boxInner">
			<div class="boxImg"><img src="/img/dummy/img01.gif" alt=""></div>
			<div class="boxTxt">
				<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</div>
		</div>
	</div>
	<div class="boxContent">
		<div class="boxInner">
			<div class="boxImg"><img src="/img/dummy/img01.gif" alt=""></div>
			<div class="boxTxt">
				<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</div>
		</div>
	</div>
	<div class="boxContent">
		<div class="boxInner">
			<div class="boxImg"><img src="/img/dummy/img01.gif" alt=""></div>
			<div class="boxTxt">
				<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
			</div>
		</div>
	</div>
</div>
```
*/
.boxList01,
.boxList02,
.boxList03,
.boxList04,
.boxList05 {
  /*/.style01*/
}
.boxList01.style01 > .boxContent > .boxInner,
.boxList02.style01 > .boxContent > .boxInner,
.boxList03.style01 > .boxContent > .boxInner,
.boxList04.style01 > .boxContent > .boxInner,
.boxList05.style01 > .boxContent > .boxInner {
  border: 1px solid #eee;
  padding: 0;
}
.boxList01.style01 > .boxContent > .boxInner .boxImg,
.boxList02.style01 > .boxContent > .boxInner .boxImg,
.boxList03.style01 > .boxContent > .boxInner .boxImg,
.boxList04.style01 > .boxContent > .boxInner .boxImg,
.boxList05.style01 > .boxContent > .boxInner .boxImg {
  border-bottom: 2px solid #00b1a9;
}

/*
# コンテンツエリアの段落設定

`#container`の`.panel01`内の`p`タグにはmargin-bottomを指定
段落と段落の間の行間を空ける

```
<div id="container">
	<section class="section01 panel01">
		<p>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。<br>文章が入ります。文章が入ります。文章が入ります。</p>
		<p>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。<br>文章が入ります。文章が入ります。文章が入ります。</p>
	</section>
</div>
```
*/
#container .panel01 p {
  margin-bottom: 20px;
}
#container .panel01 p:last-child {
  margin-bottom: 0;
}

/*
# リード文

文字大きめ、センタリングのリード文`.txtLead01`

```
<p class="txtLead01">リード文が入ります。</p>
```
*/
.txtLead01 {
  font-size: 15px;
  font-size: 1.5rem;
  text-align: center;
}

/*
# 強調

## 強調文字01`.txtEm01`

```
<p class="txtEm01">文章を強調表示します。</p>
<p>文章の<strong class="txtEm01">一部</strong>を強調表示します。</p>
```
## 強調文字02`.txtEm02`

```
<p class="txtEm02">文章を強調表示します。</p>
<p>文章の<strong class="txtEm02">一部</strong>を強調表示します。</p>
```
## 強調文字03`.txtEm03`

```
<p class="txtEm03">文章を強調表示します。</p>
<p>文章の<strong class="txtEm03">一部</strong>を強調表示します。</p>
```
*/
.txtEm01 {
  font-size: 15px;
  font-size: 1.5rem;
  color: #00b1a9;
}

.txtEm02 {
  font-size: 15px;
  font-size: 1.5rem;
  color: #000;
  padding-bottom: 1px;
  border-bottom: 2px solid #00b1a9;
}

.txtEm03 {
  background-color: #8ed0c9;
  font-weight: bold;
  color: #000;
}

/*
# その他のテキストスタイル

## 小さい文字`.txtSmall01`

```
<p class="txtSmall01">小さい文字</p>
```
## 画像キャプション`.txtCaption01`

```
<div class="boxImg boxImg01"><img src="/img/dummy/thumb01.gif"></div>
<p class="txtCaption01">画像のキャプション</p>
```
*/
.txtSmall01 {
  font-size: 11px;
  font-size: 1.1rem;
}

.txtCaption01 {
  text-align: center;
  margin-top: 10px;
}

/*
# センター寄せの見出し

## センター寄せの見出しスタイル1`.tit01`

```
<h3 class="tit01">見出し</h3>
```
## センター寄せの見出しスタイル2`.tit02`

```
<h3 class="tit02">見出し</h3>
<h3 class="tit02 style01">見出し</h3>
```
*/
.tit01 {
  font-size: 24px;
  font-size: 2.4rem;
  text-align: center;
  margin-bottom: 20px;
  color: #000;
}
.tit01.style01 {
  color: #00b1a9;
}

.tit02 {
  font-size: 18px;
  font-size: 1.8rem;
  text-align: center;
  line-height: 1.2;
  margin-bottom: 20px;
  color: #000;
}
@media only screen and (max-width: 480px) {
  .tit02 {
    font-size: 15px;
    font-size: 1.5rem;
  }
}
.tit02:last-child {
  margin-bottom: 0;
}
.tit02.style01 {
  color: #00b1a9;
}

/*
# タイトルバー

## タイトルバー1`.titBar01`

```
<div class="titBar01">
	<h2 class="tit">お知らせ</h2>
	<a href="#" class="menu">RSS</a>
</div>
```
## タイトルバー2`.titBar02`

```
<h2 class="titBar02">
	<span class="inner">
		<i><img src="/img/index/ico_support_tit01.png" height="47" width="50" alt=""></i>
		<span class="tit">会員サポート</span>
	</span>
</h2>
```
*/
.titBar01 {
  border-bottom: 2px solid #8ed0c9;
  display: table;
  width: 100%;
  margin: 0 auto 20px;
  font-weight: bold;
}
.titBar01 > .tit, .titBar01 > .menu {
  display: table-cell;
  vertical-align: middle;
}
.titBar01 > .menu {
  text-align: right;
  text-decoration: none;
  padding: 0 10px 10px;
  font-size: 15px;
  font-size: 1.5rem;
  color: #00b1a9;
}
.titBar01 > .tit {
  font-size: 24px;
  font-size: 2.4rem;
  color: #333;
  padding: 0 0 10px;
}

.titBar02 {
  background-color: #8ed0c9;
  @box-shadow (0 1px 2px rgba($baseColor07,.2));
  text-align: center;
  font-size: 24px;
  font-size: 2.4rem;
  color: #fff;
  font-weight: normal;
  padding: 0 10px;
  position: relative;
}
.titBar02:after {
  border-width: 10px 15px 0;
  border-color: #8ed0c9 transparent transparent;
  display: block;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  bottom: -10px;
  left: 50%;
  margin-left: -15px;
}
.titBar02 > .inner {
  display: table;
  width: auto;
  margin: 0 auto;
}
.titBar02 > .inner > i, .titBar02 > .inner > span {
  display: table-cell;
}
.titBar02 > .inner > i {
  vertical-align: bottom;
}
.titBar02 > .inner > span {
  padding: 10px;
}

/*
# 中見出し・小見出しのバリエーション

## 見出し1`.titBasic01`

```
<h3 class="titBasic01">見出し.titBasic01</h3>
```
## 見出し2`.titBasic02`

```
<h3 class="titBasic02">見出し.titBasic02</h3>
```
## 見出し3`.titBasic03`

```
<h3 class="titBasic03">見出し.titBasic03</h3>
```
## 見出し4`.titBasic04`

```
<h3 class="titBasic04">見出し.titBasic04</h3>
```
*/
.titBasic01 {
  color: #000;
  border-bottom: #00b1a9 dashed 1px;
  font-weight: normal;
  font-size: 24px;
  font-size: 2.4rem;
  padding: 0 0 10px;
  max-width: 1200px;
  margin: 60px auto 20px;
}
@media only screen and (max-width: 480px) {
  .titBasic01 {
    font-size: 18px;
    font-size: 1.8rem;
    margin-top: 30px;
  }
}

.titBasic02 {
  margin-top: 20px;
  font-weight: normal;
  font-size: 18px;
  font-size: 1.8rem;
  color: #000;
  margin-bottom: 10px;
  padding: 0 0 0 20px;
  position: relative;
}
.titBasic02:before {
  display: block;
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  top: 7px;
  left: 1px;
  border-style: solid;
  border-color: #00b1a9;
  border-width: 2px;
  border-radius: 100%;
}

.titBasic03 {
  margin-top: 20px;
  color: #333;
  font-size: 15px;
  font-size: 1.5rem;
  margin-bottom: 10px;
  font-weight: bold;
}

.titBasic04 {
  margin-top: 20px;
  color: #333;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: normal;
  margin-bottom: 10px;
}

/*フォーム：姓名、セイメイ部分*/
.nametxt {
  display: inline-block;
  margin-right: 5px;
}

.titBasic01,
.titBasic02,
.titBasic03,
.titBasic04 {
  line-height: 1.2;
}
.titBasic01:last-child,
.titBasic02:last-child,
.titBasic03:last-child,
.titBasic04:last-child {
  margin-bottom: 0;
}
.titBasic01:first-child,
.titBasic02:first-child,
.titBasic03:first-child,
.titBasic04:first-child {
  margin-top: 0;
}

/*
# 小見出し（お問い合わせボタン上）

*/
.ctaNoteTxt {
  font-size: 13px;
  font-size: 1.3rem;
  text-align: center;
  font-weight: 700;
}

/*
# リンク

通常のリンクスタイル`a`

```
<a href="#">リンク</a>

```
*/
a {
  color: #0098d8;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
a:hover {
  color: #3fc6ff;
}

/*
# テキストリンク

## インラインリンク`.link01`

```
<p>文章中に<a href="#" class="link01">インラインリンク</a>を挿入できます</p>

```
## ブロックリンク`.linkBlock01`
```
<p><a href="#" class="linkBlock01">ブロックリンクを挿入できます</a></p>

```
*/
.linkBlock01, .link01 {
  text-decoration: none;
  position: relative;
}
.linkBlock01:before, .link01:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  background: url("/common/img/sprite_ico01.png") 0 0 no-repeat;
  -webkit-background-size: 40px auto;
  background-size: 40px auto;
}
.linkBlock01:hover, .link01:hover {
  text-decoration: underline;
}

.linkBlock01 {
  display: block;
}
.linkBlock01:before {
  top: 7px;
}

/*
# 通常のボタン`.btn01`

```
<p class="btn01"><a href="#">ボタン</a></p>
<p class="btn01 small"><a href="#">小さいボタン</a></p>
<p class="btn01 entry"><a href="#">お申し込み</a></p>
<p class="btn01 contact"><a href="#">お問い合わせ</a></p>

```
*/
.btn01 {
  margin: 30px auto;
  text-align: center;
  display: table;
  height: 50px;
  min-width: 300px;
  border-collapse: separate;
}
@media only screen and (max-width: 767px) {
  .btn01 {
    width: 80%;
    min-width: auto;
  }
}
.btn01:first-child {
  margin-top: 0;
}
.btn01:last-child {
  margin-bottom: 0;
}
.btn01 > a, .btn01 > span, .btn01 > input, .btn01 > button {
  margin: 0 auto;
  display: table-cell;
  vertical-align: middle;
  padding: 0 20px;
  background-color: #fff;
  border-radius: 25px;
  border: 1px solid #00b1a9;
  text-decoration: none;
  color: #000;
  font-size: 15px;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.PC .btn01 > a:hover, .PC .btn01 > span:hover, .PC .btn01 > input:hover, .PC .btn01 > button:hover {
  background-color: rgba(142, 208, 201, 0.3);
}
.btn01 > a::before, .btn01 > span::before, .btn01 > input::before, .btn01 > button::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  background: url("/common/img/sprite_ico01.png") 0 -2px no-repeat;
  -webkit-background-size: 40px auto;
  background-size: 40px auto;
}
.btn01.small {
  min-width: auto;
}
.btn01.entry > a, .btn01.entry > span, .btn01.entry > input, .btn01.entry > button {
  background-color: #fff100;
  border-color: #e6d900;
  color: #00b1a9;
}
.PC .btn01.entry > a:hover, .PC .btn01.entry > span:hover, .PC .btn01.entry > input:hover, .PC .btn01.entry > button:hover {
  background-color: #fff766;
}
.btn01.entry > a::before, .btn01.entry > span::before, .btn01.entry > input::before, .btn01.entry > button::before {
  background-position: 0 -80px;
}
.btn01.contact > a, .btn01.contact > span, .btn01.contact > input, .btn01.contact > button {
  background-color: #00b1a9;
  border-color: #009891;
  color: #fff;
}
.PC .btn01.contact > a:hover, .PC .btn01.contact > span:hover, .PC .btn01.contact > input:hover, .PC .btn01.contact > button:hover {
  background-color: #8ed0c9;
}
.btn01.contact > a::before, .btn01.contact > span::before, .btn01.contact > input::before, .btn01.contact > button::before {
  background-position: -20px -60px;
}

/*
# 電話用ボタン`.btnTel01`

`<a>`タグにクラス`.telLink`を使うと、PCでのリンクを無効にします

```
<p class="btnTel01"><a href="tel:08008006244" class="telLink"><span class="tel">0800-800-6244</span></a></p>

```
*/
.btnTel01 {
  text-align: center;
  border-collapse: separate;
}
@media only screen and (max-width: 767px) {
  .btnTel01 {
    margin: 10px auto;
    text-align: center;
    display: table;
    height: 50px;
    min-width: auto;
    width: 80%;
  }
  .btnTel01:first-child {
    margin-top: 0;
  }
  .btnTel01:last-child {
    margin-bottom: 0;
  }
}
.btnTel01 a {
  max-width: 640px;
  color: #333;
  text-decoration: none;
  margin: 0 auto;
  line-height: 1.1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
@media only screen and (max-width: 767px) {
  .btnTel01 a {
    display: table-cell;
    padding: 0 20px;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 25px;
    color: #000;
    vertical-align: middle;
  }
}
.btnTel01 a span {
  vertical-align: middle;
}
.btnTel01 a .tel {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 20px;
  font-size: 2rem;
}
.btnTel01 a::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  background: url("/common/img/sprite_ico01.png") 0 -40px no-repeat;
  -webkit-background-size: 40px auto;
  background-size: 40px auto;
}

/*
# リストスタイル .ulBasic01

標準の箇条書きリストスタイル`.ulBasic01`

```
<ul class="ulBasic01">
	<li>箇条書きリスト</li>
	<li>箇条書きリスト<br>箇条書きリスト箇条書きリスト</li>
	<li>箇条書きリスト</li>
</ul>
```
*/
.ulBasic01 {
  margin-bottom: 20px;
}
.ulBasic01:last-child {
  margin-bottom: 0;
}
.ulBasic01 > li {
  padding-left: 15px;
  position: relative;
  text-indent: 0;
}
.ulBasic01 > li:before {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  background-color: #00b1a9;
  position: absolute;
  top: 8px;
  left: 4px;
}

/*
# リストスタイル .ulList01
「/」で区切る並列リスト`.ulList01`

```
<ul class="ulList01">
	<li>箇条書きリスト</li>
	<li>箇条書きリスト</li>
	<li>箇条書きリスト</li>
</ul>
```
*/
.ulList01 {
  text-align: center;
  margin-bottom: 20px;
}
.ulList01:last-child {
  margin-bottom: 0;
}
.ulList01.left {
  text-align: left;
}
.ulList01 > li {
  white-space: nowrap;
  display: inline-block;
  padding: 5px 10px 0 0;
}
@media only screen and (max-width: 480px) {
  .ulList01 > li {
    white-space: normal;
    padding: 10px 0 0;
    display: block;
  }
}
.ulList01 > li:after {
  content: "/";
  padding-left: 10px;
}
@media only screen and (max-width: 480px) {
  .ulList01 > li:after {
    display: none;
  }
}
.ulList01 > li:last-child:after {
  display: none;
}

/*
# リストスタイル .ulLink01

リンクリスト`.ulLink01`

```
<ul class="ulLink01">
	<li><a href="#">リンクリスト</a></li>
	<li><a href="#">リンクリスト</a></li>
	<li><a href="#">リンクリスト</a>
		<ul class="ulSub">
			<li><a href="#">リンクリスト</a></li>
			<li><a href="#">リンクリスト</a></li>
		</ul>
	</li>
	<li><a href="#">リンクリスト</a></li>
</ul>

```
*/
.ulLink01 > li {
  border-bottom: 1px dotted #8ed0c9;
}
.ulLink01 > li:last-child {
  border-bottom: none;
}
.ulLink01 > li > a {
  text-decoration: none;
  padding: 10px 10px 10px 20px;
  display: block;
  position: relative;
}
.ulLink01 > li > a:before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: url("/common/img/sprite_ico01.png") 0 0 no-repeat;
  -webkit-background-size: 40px auto;
  background-size: 40px auto;
  position: absolute;
  top: 10px;
  left: 0;
}
.ulLink01 > li > .ulSub {
  padding: 0 20px 10px;
  display: block;
}
.ulLink01 > li > .ulSub > li > a {
  text-decoration: none;
  color: #666;
  display: block;
  padding: 5px 0 5px 20px;
  position: relative;
}
.ulLink01 > li > .ulSub > li > a:before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: url("/common/img/sprite_ico01.png") 0 0 no-repeat;
  -webkit-background-size: 40px auto;
  background-size: 40px auto;
  position: absolute;
  top: 5px;
  left: 0;
}

/*
# リストスタイル .ulCaution01

注釈リスト`.ulCaution01`

```
<ul class="ulCaution01">
	<li>※注釈リスト注釈リスト注釈リスト注釈リスト注釈リスト注釈リスト注釈リスト注釈リスト注釈リスト注釈リスト注釈リスト注釈リスト注釈リスト注釈リスト注釈リスト注釈リスト注釈リスト注釈リスト注釈リスト注釈リスト注釈リスト注釈リスト注釈リスト注釈リスト注釈リスト注釈リスト注釈リスト</li>
	<li>※注釈リスト注釈リスト注釈リスト<br>注釈リスト注釈リスト</li>
	<li>※注釈リスト注釈リスト注釈リスト</li>
</ul>

```
*/
.ulCaution01 {
  padding-left: 1em;
  margin-bottom: 20px;
}
.ulCaution01:last-child {
  margin-bottom: 0;
}
.ulCaution01 > li {
  text-align: left;
  text-indent: -1em;
}

/*
# リストスタイル .ulThumb01

サムネイルメニューリスト`.ulThumb01`

```
<ul class="ulThumb01">
	<li><a href="#"><div class="thumb"><img src="/img/dummy/thumb01.gif"></div><div class="tit">サムネイルメニュー</div></li>
	<li><a href="#"><div class="thumb"><img src="/img/dummy/thumb01.gif"></div><div class="tit">サムネイルメニュー</div></li>
	<li><a href="#"><div class="thumb"><img src="/img/dummy/thumb01.gif"></div><div class="tit">サムネイルメニュー</div></li>
</ul>

<ul class="ulThumb01 round">
	<li><a href="#"><div class="thumb"><img src="/img/dummy/thumb01.gif"></div><div class="tit">サムネイルメニュー</div></li>
	<li><a href="#"><div class="thumb"><img src="/img/dummy/thumb01.gif"></div><div class="tit">サムネイルメニュー</div></li>
	<li><a href="#"><div class="thumb"><img src="/img/dummy/thumb01.gif"></div><div class="tit">サムネイルメニュー</div></li>
</ul>

```
*/
.ulThumb01 {
  display: table;
  table-layout: fixed;
  margin: 0 auto;
}
.ulThumb01 li {
  display: table-cell;
  padding: 0 10px;
  text-align: center;
  vertical-align: top;
}
.ulThumb01 li a {
  text-decoration: none;
}
.ulThumb01 li .thumb {
  margin: 0 auto 10px;
  display: block;
}
.ulThumb01 li .thumb img {
  width: auto;
  height: auto;
  max-width: 100%;
}
.ulThumb01 li .tit {
  txt-align: center;
  font-weight: normal;
}
.ulThumb01 li .tit:before {
  border-width: 3px 0 3px 5px;
  border-color: transparent transparent transparent #00b1a9;
  display: inline-block;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  margin-right: 5px;
}
@media only screen and (max-width: 767px) {
  .ulThumb01 li .tit {
    font-size: 13px;
    font-size: 1.3rem;
  }
}
@media only screen and (max-width: 480px) {
  .ulThumb01 li .tit {
    font-size: 11px;
    font-size: 1.1rem;
  }
}
.ulThumb01.round li .thumb img {
  border-radius: 100%;
}

/*
# リストスタイル .ulBtn01

ボタンリスト`.ulBtn01`
ボタンを2列表示します。

```
<ul class="ulBtn01">
	<li><a href="#">ボタン</a></li>
	<li><a href="#">ボタン</a></li>
	<li class="entry"><a href="#">お申し込みボタン</a></li>
	<li class="contact"><a href="#">お問い合わせボタン</a></li>
</ul>

```
*/
.ulBtn01 {
  width: 100%;
  max-width: 600px;
  margin: 20px auto 0;
}
.ulBtn01:first-child {
  margin-top: 0;
}
.ulBtn01 > li {
  display: table;
  height: 50px;
  width: 50%;
  padding: 0 2px;
  float: left;
  margin: 0 auto 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
@media only screen and (max-width: 767px) {
  .ulBtn01 > li {
    float: none;
    padding: 0;
    width: 80%;
  }
}
.ulBtn01 > li:nth-child(2n+1) {
  clear: both;
}
.ulBtn01 > li:nth-child(2n+1):nth-last-child(2) {
  margin-bottom: 0;
}
.ulBtn01 > li:last-child {
  padding-right: 0;
}
@media only screen and (max-width: 767px) {
  .ulBtn01 > li:last-child {
    margin-bottom: 0;
  }
}
.ulBtn01 > li > a {
  display: table-cell;
  padding: 0 20px;
  background-color: #fff;
  border-radius: 25px;
  border: 1px solid #00b1a9;
  text-decoration: none;
  color: #000;
  font-size: 15px;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.1;
  vertical-align: middle;
  text-align: center;
}
.PC .ulBtn01 > li > a:hover {
  background-color: rgba(142, 208, 201, 0.3);
}
.ulBtn01 > li > a::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  background: url("/common/img/sprite_ico01.png") 0 -2px no-repeat;
  -webkit-background-size: 40px auto;
  background-size: 40px auto;
}
.ulBtn01 > li.entry > a {
  background-color: #fff100;
  border-color: #e6d900;
  color: #00b1a9;
}
.PC .ulBtn01 > li.entry > a:hover {
  background-color: #fff766;
}
.ulBtn01 > li.entry > a::before {
  background-position: 0 -80px;
}
.ulBtn01 > li.contact > a {
  background-color: #00b1a9;
  border-color: #009891;
  color: #fff;
}
.PC .ulBtn01 > li.contact > a:hover {
  background-color: #8ed0c9;
}
.ulBtn01 > li.contact > a::before {
  background-position: -20px -60px;
}

.ulBtn01--type01 li {
  padding: 0 10px;
}
@media only screen and (max-width: 767px) {
  .ulBtn01--type01 li {
    margin-top: 20px;
  }
}

/*
# リストスタイル .ulNews01

ニュースリスト`.ulNews01`

```
<ul class="ulNews01">
	<li>
		<div>
			<span class="ico"><i class="info">お知らせ</i></span>
			<span class="date">2015.10.15</span>
			<span class="data">ウェブサイトをリニューアルいたしました</span>
		</div>
	</li>
	<li>
		<a href="">
			<span class="ico"><i class="security">セキュリティ</i></span>
			<span class="date">2015.08.10</span>
			<span class="data">【西日本エリア】 フレッツ設備 メンテナンスのお知らせ（8.27、8.28 予定）</span>
		</a>
	</li>
	<li>
		<a href="">
			<span class="ico"><i class="maintenance">メンテナンス</i></span>
			<span class="date">2015.08.10</span>
			<span class="data">【東日本エリア】 フレッツ設備 メンテナンスのお知らせ（8.21、8.24 予定）</span>
		</a>
	</li>
	<li>
		<a href="">
			<span class="ico"><i class="fault">障害情報</i></span>
			<span class="date">2015.07.22</span>
			<span class="data">【西日本エリア】 フレッツ設備 緊急メンテナンスのお知らせ（7.24 終了）</span>
		</a>
	</li>
	<li>
		<a href="">
			<span class="ico"><i class="info">お知らせ</i></span>
			<span class="date">2015.07.22</span>
			<span class="data">【宮城エリア】 フレッツ設備 メンテナンスのお知らせ（7.23、7.31 終了）</span>
		</a>
	</li>
	<li>
		<a href="">
			<span class="ico"><i class="maintenance">メンテナンス</i></span>
			<span class="date">2015.07.17</span>
			<span class="data">【西日本エリア】 障害発生のご報告（復旧済み）</span>
		</a>
	</li>
</ul>

```
*/
.ulNews01 li {
  line-height: 1.6;
  border-bottom: 1px dashed #ccc;
}
.ulNews01 li > a, .ulNews01 li > div {
  display: table;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
@media only screen and (max-width: 480px) {
  .ulNews01 li > a, .ulNews01 li > div {
    display: block;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
.ulNews01 li > a {
  text-decoration: none;
  position: relative;
}
.PC .ulNews01 li > a:hover {
  background-color: #fcfcfc;
}
@media only screen and (max-width: 767px) {
  .ulNews01 li > a {
    padding-right: 20px;
  }
  .ulNews01 li > a:after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: url("/common/img/sprite_ico01.png") 0 0 no-repeat;
    -webkit-background-size: 40px auto;
    background-size: 40px auto;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -10px;
  }
}
.ulNews01 li .date,
.ulNews01 li .ico,
.ulNews01 li .data {
  display: table-cell;
  vertical-align: top;
  text-align: left;
  padding: 20px 0;
}
@media only screen and (max-width: 480px) {
  .ulNews01 li .date,
  .ulNews01 li .ico,
  .ulNews01 li .data {
    padding: 0;
  }
}
.ulNews01 li:first-child .date,
.ulNews01 li:first-child .ico,
.ulNews01 li:first-child .data {
  padding-top: 0;
}
.ulNews01 li .date,
.ulNews01 li .ico {
  white-space: nowrap;
  width: 100px;
}
@media only screen and (max-width: 480px) {
  .ulNews01 li .date,
  .ulNews01 li .ico {
    display: inline;
    width: auto;
  }
}
.ulNews01 li .date {
  color: #333;
  font-weight: 500;
  padding-left: 10px;
  padding-right: 10px;
}
.ulNews01 li .ico i {
  background-color: #00b1a9;
  padding: 2px 0;
  line-height: 1;
  color: #fff;
  font-size: 11px;
  font-size: 1.1rem;
  text-align: center;
  display: inline-block;
  width: 100%;
  font-style: normal;
}
@media only screen and (max-width: 480px) {
  .ulNews01 li .ico i {
    width: 100px;
  }
}
.ulNews01 li .ico i.security {
  background-color: #70a400;
}
.ulNews01 li .ico i.maintenance {
  background-color: #0052a4;
}
.ulNews01 li .ico i.fault {
  background-color: #ff4200;
}
@media only screen and (max-width: 480px) {
  .ulNews01 li .data {
    display: block;
  }
}

/*
# リストスタイル .ulSitemap01

サイトマップ`.ulSitemap01`、`.ulSitemap02`

```
<ul class="ulSitemap01">
	<li><a href="#">トップページ</a></li>
	<li><a href="#">サービス案内</a></li>
	<li><a href="#">ご利用料金</a></li>
	<li><a href="#">ご入会の流れ</a></li>
	<li>
		<a href="#">会員サポート</a>
		<ul class="ulSitemap02">
			<li><a href="#">インターネット接続の設定</a></li>
			<li><a href="#">メールの設定</a></li>
			<li><a href="#">困ったときの対処法</a></li>
		</ul>
	</li>
	<li class="entry"><a href="#">お申し込み</a></li>
	<li class="contact"><a href="#">お問い合わせ</a></li>
</ul>

```
*/
ul.ulSitemap01 > li {
  line-height: 1.8;
}
ul.ulSitemap01 > li > a {
  font-size: 13px;
  font-size: 1.3rem;
  text-decoration: none;
  color: #666;
  padding: 0 10px;
  display: block;
}

@media only screen and (max-width: 767px) {
  ul.ulSitemap02 {
    display: none;
  }
}
ul.ulSitemap02 > li {
  line-height: 1.6;
  padding-left: 10px;
}
ul.ulSitemap02 > li > a {
  text-decoration: none;
  font-size: 11px;
  font-size: 1.1rem;
  padding: 0 10px;
  display: block;
  color: #999999;
  position: relative;
}
ul.ulSitemap02 > li > a:before {
  content: "";
  display: block;
  width: 5px;
  height: 2px;
  background-color: #0098d8;
  position: absolute;
  top: 7px;
  left: 0;
}

/*
# リストスタイル .ulSlide01

カルーセル用リスト`.ulSlide01`

*/
.ulSlide01 {
  position: relative;
}
.ulSlide01 li {
  padding: 10px;
}
.ulSlide01 li.slick-slide {
  opacity: 0.5;
}
.ulSlide01 li.slick-slide.slick-active {
  opacity: 1;
}
.ulSlide01 li img {
  width: 100%;
  height: auto;
}
.ulSlide01 .slick-list {
  z-index: 1;
}
.ulSlide01 .slick-dots {
  margin: 0 auto;
  text-align: center;
}
.ulSlide01 .slick-dots li {
  display: inline-block;
  cursor: pointer;
  padding: 5px;
}
.ulSlide01 .slick-dots li:before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background-color: #fff;
  border-radius: 100%;
  border: 1px solid #fff;
  -webkit-box-shadow: 0 0 1px 1px #00b1a9;
  -moz-box-shadow: 0 0 1px 1px #00b1a9;
  box-shadow: 0 0 1px 1px #00b1a9;
}
.ulSlide01 .slick-dots li button {
  display: none;
}
.ulSlide01 .slick-dots li.slick-active:before {
  background-color: #00b1a9;
}
.ulSlide01 .slick-arrow {
  overflow: hidden;
  width: 40px;
  height: 80px;
  display: block;
  text-indent: -999999px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  margin-top: -40px;
  border: none;
  z-index: 2;
  cursor: pointer;
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}
@media only screen and (max-width: 480px) {
  .ulSlide01 .slick-arrow {
    width: 30px;
    height: 60px;
  }
}
.ulSlide01 .slick-arrow:before, .ulSlide01 .slick-arrow:after {
  content: "";
  display: block;
  background-color: #00b1a9;
  width: 2px;
  height: 30px;
  position: absolute;
}
@media only screen and (max-width: 480px) {
  .ulSlide01 .slick-arrow:before, .ulSlide01 .slick-arrow:after {
    height: 24px;
  }
}
.ulSlide01 .slick-prev {
  left: 0;
  border-radius: 0 40px 40px 0;
}
@media only screen and (max-width: 480px) {
  .ulSlide01 .slick-prev {
    border-radius: 0 30px 30px 0;
  }
}
.ulSlide01 .slick-prev:before {
  left: 5px;
  top: 10px;
  -webkit-transform-origin: left bottom;
  -ms-transform-origin: left bottom;
  transform-origin: left bottom;
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}
@media only screen and (max-width: 480px) {
  .ulSlide01 .slick-prev:before {
    left: 3px;
    top: 6px;
  }
}
.ulSlide01 .slick-prev:after {
  left: 5px;
  bottom: 10px;
  -webkit-transform-origin: left top;
  -ms-transform-origin: left top;
  transform-origin: left top;
  -webkit-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  transform: rotate(-30deg);
}
@media only screen and (max-width: 480px) {
  .ulSlide01 .slick-prev:after {
    left: 3px;
    bottom: 6px;
  }
}
.ulSlide01 .slick-next {
  border-radius: 40px 0 0 40px;
  right: 0;
}
@media only screen and (max-width: 480px) {
  .ulSlide01 .slick-next {
    border-radius: 30px 0 0 30px;
  }
}
.ulSlide01 .slick-next:before {
  right: 5px;
  top: 10px;
  -webkit-transform-origin: right bottom;
  -ms-transform-origin: right bottom;
  transform-origin: right bottom;
  -webkit-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  transform: rotate(-30deg);
}
@media only screen and (max-width: 480px) {
  .ulSlide01 .slick-next:before {
    right: 3px;
    top: 6px;
  }
}
.ulSlide01 .slick-next:after {
  right: 5px;
  bottom: 10px;
  -webkit-transform-origin: right top;
  -ms-transform-origin: right top;
  transform-origin: right top;
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}
@media only screen and (max-width: 480px) {
  .ulSlide01 .slick-next:after {
    right: 3px;
    bottom: 6px;
  }
}

/*
# ナビゲーションリスト .ulNav01

標準のナビゲーションリスト1`.ulNav01`
`<i>`の背景にアイコン画像を指定して使用する

```
<ul class="ulNav01">
	<li><a href="#"><span class="inner"><i>&nbsp;</i>メニュー1</span></a></li>
	<li><a href="#"><span class="inner"><i>&nbsp;</i>メニュー2</span></a></li>
	<li><a href="#"><span class="inner"><i>&nbsp;</i>メニュー3</span></a></li>
</ul>
```
*/
.ulNav01 {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.ulNav01 li {
  display: table-cell;
  vertical-align: top;
  text-align: center;
}
.ulNav01 li > a {
  padding: 10px 0;
  display: table;
  width: 100%;
  vertical-align: middle;
  text-decoration: none;
  line-height: 1.1;
}
.PC .ulNav01 li > a:hover {
  background-color: #eee;
}
@media only screen and (max-width: 767px) {
  .ulNav01 li > a {
    font-size: 11px;
    font-size: 1.1rem;
    padding: 5px 0;
  }
}
@media only screen and (max-width: 480px) {
  .ulNav01 li > a {
    font-size: 10px;
    font-size: 1rem;
  }
}
.ulNav01 li > a > .inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.ulNav01 li > a > .inner > i {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  display: block;
  margin: 0 auto;
  position: relative;
}

/*
# ナビゲーションリスト .ulNav02

標準のナビゲーションリスト2`.ulNav02`

```
<div style="background-color: #222">
<ul class="ulNav02">
	<li><a href="#">メニュー1</a></li>
	<li><a href="#">メニュー2</a></li>
	<li><a href="#">メニュー3</a></li>
	<li><span>メニュー4</span></li>
</ul>
</div>
```
*/
.ulNav02 {
  display: table;
}
@media only screen and (max-width: 767px) {
  .ulNav02 {
    display: block;
    border: 1px solid #eee;
    border-radius: 3px;
  }
}
.ulNav02 li {
  display: table-cell;
}
@media only screen and (max-width: 767px) {
  .ulNav02 li {
    display: block;
    border-bottom: 1px solid #eee;
  }
  .ulNav02 li:last-child {
    border-bottom: none;
  }
}
.ulNav02 li a, .ulNav02 li span {
  padding: 10px 20px;
  text-decoration: none;
  color: #fff;
  display: block;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .ulNav02 li a, .ulNav02 li span {
    padding: 20px 10px;
  }
}
@media only screen and (max-width: 480px) {
  .ulNav02 li a, .ulNav02 li span {
    padding: 15px 10px;
  }
}
.ulNav02 li a:after, .ulNav02 li span:after {
  content: "";
  display: block;
  width: 1px;
  height: 10px;
  background-color: #fff;
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -5px;
}
.ulNav02 li:first-child a:before, .ulNav02 li span:before {
  content: "";
  display: block;
  width: 1px;
  height: 10px;
  background-color: #fff;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -5px;
}

/*
# ナビゲーションリスト .ulNav03

標準のナビゲーションリスト3`.ulNav03`

```
<ul class="ulNav03">
	<li>
		<a href="#" class="active">メニュー1</a>
		<ul class="sub active">
			<li><a href="#">メニュー1　サブメニュー1</a></li>
			<li><a href="#" class="active">メニュー1　サブメニュー2</a></li>
			<li><a href="#">メニュー1　サブメニュー3</a></li>
		</ul>
	</li>
	<li><a href="#">メニュー2 <span class="small">（補足）</span></a></li>
	<li>
		<a href="#">メニュー3</a>
		<ul class="sub">
			<li><a href="#">メニュー3　サブメニュー1</a></li>
			<li><a href="#">メニュー3　サブメニュー2</a></li>
			<li><a href="#">メニュー3　サブメニュー3</a></li>
		</ul>
	</li>
	<li><span>メニュー4</span></li>
</ul>
```
*/
.ulNav03 > li:nth-child(n+2) {
  border-top: 1px solid #009891;
}
.ulNav03 > li > a, .ulNav03 > li > span {
  display: block;
  padding: 10px;
  text-decoration: none;
  background-color: #00b1a9;
  color: #fff;
  font-size: 15px;
  font-size: 1.5rem;
}
@media only screen and (max-width: 480px) {
  .ulNav03 > li > a, .ulNav03 > li > span {
    font-size: 14px;
    font-size: 1.4rem;
  }
}
.ulNav03 > li > a.active, .ulNav03 > li > span.active {
  background-color: #009891;
  position: relative;
}
.ulNav03 > li > a.active:after, .ulNav03 > li > span.active:after {
  border-width: 5px 5px 5px 0;
  border-color: transparent #009891 transparent transparent;
  display: block;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  left: -5px;
  top: 50%;
  margin-top: -5px;
}
.ulNav03 > li > a .small, .ulNav03 > li > span .small {
  font-size: 13px;
  font-size: 1.3rem;
}
@media only screen and (max-width: 480px) {
  .ulNav03 > li > a .small, .ulNav03 > li > span .small {
    font-size: 10px;
    font-size: 1rem;
  }
}
.ulNav03 > li > .sub {
  display: none;
}
.ulNav03 > li > .sub.active {
  display: block;
}
.ulNav03 > li > .sub > li > a {
  padding: 10px 20px;
  display: block;
  background-color: #fff;
  text-decoration: none;
  border-bottom: 1px solid #eee;
  color: #666;
}
.ulNav03 > li > .sub > li > a.active {
  color: #00b1a9;
  font-weight: bold;
  background-color: #eee;
  border-left: 2px solid #00b1a9;
}
.ulNav03 > li > .sub > li:last-child > a {
  border-bottom: none;
}

/*
# 番号付きリストスタイル .olBasic01

標準の番号付きリストスタイル`.olBasic01`

```
<ul class="olBasic01">
	<li>番号付きリスト</li>
	<li>番号付きリスト<br>番号付きリスト番号付きリスト</li>
	<li>番号付きリスト</li>
</ul>
```
*/
.olBasic01 {
  margin-bottom: 20px;
}
.olBasic01:last-child {
  margin-bottom: 0;
}
.olBasic01 > li {
  list-style: decimal;
  margin-left: 2em;
  text-indent: 0;
}

/*
# 記述リストスタイル .dlBasic01

標準の記述リストスタイル`.dlBasic01`

```
<dl class="dlBasic01">
	<dt>記述リスト</dt>
	<dd>記述リストの説明が入ります。記述リストの説明が入ります。記述リストの説明が入ります。記述リストの説明が入ります。記述リストの説明が入ります。記述リストの説明が入ります。</dd>
	<dt>記述リスト</dt>
	<dd>記述リストの説明が入ります。記述リストの説明が入ります。記述リストの説明が入ります。記述リストの説明が入ります。記述リストの説明が入ります。記述リストの説明が入ります。</dd>
	<dt>記述リスト</dt>
	<dd>記述リストの説明が入ります。記述リストの説明が入ります。記述リストの説明が入ります。記述リストの説明が入ります。記述リストの説明が入ります。記述リストの説明が入ります。</dd>
</ul>
```
*/
.dlBasic01 dt, .dlBasic01 dd {
  padding: 10px 0;
}
.dlBasic01 dt:first-child, .dlBasic01 dt:nth-child(2), .dlBasic01 dd:first-child, .dlBasic01 dd:nth-child(2) {
  padding-top: 0;
}
.dlBasic01 dt:last-child, .dlBasic01 dt:nth-last-child(2), .dlBasic01 dd:last-child, .dlBasic01 dd:nth-last-child(2) {
  padding-bottom: 0;
}
.dlBasic01 dt {
  clear: both;
  float: left;
  width: 140px;
  line-height: 1.4;
  font-size: 15px;
  font-size: 1.5rem;
  color: #333;
}
@media only screen and (max-width: 480px) {
  .dlBasic01 dt {
    float: none;
    width: auto;
  }
}
.dlBasic01 dd {
  margin-left: 140px;
  padding-left: 10px;
  position: relative;
}
@media only screen and (max-width: 480px) {
  .dlBasic01 dd {
    margin-left: 0;
    padding-left: 2rem;
  }
}
.dlBasic01 dd:before {
  border-width: 3px 0 3px 4px;
  border-color: transparent transparent transparent #000;
  display: block;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  top: 18px;
  left: 0;
}
@media only screen and (max-width: 480px) {
  .dlBasic01 dd:before {
    left: 10px;
  }
}
.dlBasic01 dd:nth-child(2):before {
  top: 8px;
}

/*
# お問い合わせエリアスタイル .dlInquiry01

お問い合わせエリアスタイル`.dlInquiry01`

```
<dl class="dlInquiry01">
	<dt class="tit">
		詳しくはお問い合わせください
	</dt>
	<dd>
		<p class="btnTel01"><a href="tel:08008006244" class="telLink"><span class="tel">0800-800-6244</span></a></p>
		<p class="txtSmall01">営業時間 平日（月～金）10:00～12:00 / 13:00～17:00</p>
	</dd>
	<dd>
		<p class="btn01 contact"><a href="/check/">お問い合わせ</a></p>
	</dd>
</dl>

```
*/
.dlInquiry01 {
  display: table;
  width: 100%;
  border: 1px solid #eee;
  background-color: #fcfcfc;
}
@media only screen and (max-width: 767px) {
  .dlInquiry01 {
    display: block;
  }
}
.dlInquiry01 > dt, .dlInquiry01 > dd {
  display: table-cell;
  vertical-align: middle;
  padding: 10px;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .dlInquiry01 > dt, .dlInquiry01 > dd {
    display: block;
  }
}
.dlInquiry01 > dd {
  border-left: 1px solid #eee;
}
@media only screen and (max-width: 767px) {
  .dlInquiry01 > dd {
    border-left: none;
  }
}

/*
# よくあるご質問スタイル .dlFAQ01

よくあるご質問スタイル`.dlFAQ01`

```
<dl class="dlFAQ01">
	<dt>質問が入ります。</dt>
	<dd>
		<p>答えが入ります。答えが入ります。答えが入ります。答えが入ります。答えが入ります。答えが入ります。答えが入ります。答えが入ります。答えが入ります。答えが入ります。答えが入ります。答えが入ります。<br>答えが入ります。答えが入ります。答えが入ります。答えが入ります。答えが入ります。</p>
	</dd>
	<dt>質問が入ります。</dt>
	<dd>
		<p>答えが入ります。答えが入ります。答えが入ります。答えが入ります。答えが入ります。答えが入ります。答えが入ります。答えが入ります。答えが入ります。答えが入ります。答えが入ります。答えが入ります。<br>答えが入ります。答えが入ります。答えが入ります。答えが入ります。答えが入ります。</p>
	</dd>
	<dt>質問が入ります。</dt>
	<dd>
		<p>答えが入ります。答えが入ります。答えが入ります。答えが入ります。答えが入ります。答えが入ります。答えが入ります。答えが入ります。答えが入ります。答えが入ります。答えが入ります。答えが入ります。<br>答えが入ります。答えが入ります。答えが入ります。答えが入ります。答えが入ります。</p>
	</dd>
</dl>

```
*/
.dlFAQ01 dt {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  padding: 10px 10px 10px 40px;
  font-size: 15px;
  font-size: 1.5rem;
  background-color: #eee;
  border-bottom: 1px solid #ccc;
  z-index: 2;
}
@media only screen and (max-width: 480px) {
  .dlFAQ01 dt {
    font-size: 15px;
    font-size: 1.5rem;
  }
}
.dlFAQ01 dt:before {
  content: "Q";
  font-size: 30px;
  font-size: 3rem;
  color: #00b1a9;
  position: absolute;
  top: 0;
  left: 10px;
  line-height: 1.1;
}
.dlFAQ01 dt.open {
  background-color: #00b1a9;
  border-bottom-color: #00b1a9;
  color: #fff;
}
.dlFAQ01 dt.open:before {
  color: #fff;
}
.dlFAQ01 dt.open:after {
  border-width: 15px 15px 0;
  border-color: #00b1a9 transparent transparent;
  display: block;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  bottom: -15px;
  left: 50%;
  margin-left: -15px;
}
.dlFAQ01 dd {
  position: relative;
  padding: 20px 20px 60px 60px;
  z-index: 1;
  display: none;
}
.dlFAQ01 dd:before {
  position: absolute;
  content: "A";
  color: #8ed0c9;
  font-size: 30px;
  font-size: 3rem;
  top: 10px;
  left: 20px;
}

/*
# ベーシックなテーブルスタイル1 .tbBasic01

## ベーシックなテーブルスタイル1
```
<table class="tbBasic01">
	<thead>
		<tr><th>見出し</th><th>見出し</th></tr>
	</thead>
	<tbody>
		<tr><th>見出し</th><td>データ</td></tr>
		<tr><th>見出し</th><td>データ</td></tr>
		<tr><th>見出し</th><td>データ</td></tr>
	</tbody>
</table>
```
## 横幅 auto
継承クラス　`.autoW`
```
<table class="tbBasic01 autoW">
	<thead>
		<tr><th>見出し</th><th>見出し</th></tr>
	</thead>
	<tbody>
		<tr><th>見出し</th><td>データ</td></tr>
		<tr><th>見出し</th><td>データ</td></tr>
		<tr><th>見出し</th><td>データ</td></tr>
	</tbody>
</table>
```
## テキスト左寄せで、スマホでは一列表示になるスタイル（フォームなどに使用）
継承クラス　`type01`
```
<table class="tbBasic01 type01">
	<tr><th>見出し</th><td>データ</td></tr>
	<tr><th>見出し</th><td>データ</td></tr>
	<tr><th>見出し</th><td>データ</td></tr>
</table>
```
*/
.tbBasic01 {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  width: 100%;
  margin-bottom: 20px;
}
.tbBasic01:last-child {
  margin-bottom: 0;
}
.tbBasic01 > thead > tr {
  position: relative;
}
.tbBasic01 > thead > tr > th {
  padding: 15px;
  background-color: #333;
  border-top: 1px solid #666;
  border-left: 1px dotted #666;
  color: #fff;
  font-weight: 500;
  vertical-align: middle;
  white-space: nowrap;
}
.tbBasic01 > thead > tr > th:first-child {
  border-left: none;
}
.tbBasic01 > thead > tr:first-child > th {
  border-top: 1px solid #000;
}
.tbBasic01 > tbody > tr > th, .tbBasic01 > tbody > tr > td, .tbBasic01 > tr > th, .tbBasic01 > tr > td {
  padding: 15px;
  border: 1px solid #ccc;
  vertical-align: middle;
  text-align: center;
}
.tbBasic01 > tbody > tr > th, .tbBasic01 > tr > th {
  background-color: #eee;
  font-weight: normal;
  color: #333;
  white-space: nowrap;
}
.tbBasic01 > tbody > tr > td, .tbBasic01 > tr > td {
  background-color: #fcfcfc;
}
.tbBasic01.autoW {
  width: auto;
}
.tbBasic01.type01 > tbody > tr > th, .tbBasic01.type01 > tbody > tr > td, .tbBasic01.type01 > tr > th, .tbBasic01.type01 > tr > td {
  text-align: left;
}
@media only screen and (max-width: 767px) {
  .tbBasic01.type01 {
    display: block;
    border-bottom: 1px solid #ccc;
    border-top: none;
  }
  .tbBasic01.type01 > tbody, .tbBasic01.type01 > thead {
    display: block;
  }
  .tbBasic01.type01 > tbody > tr, .tbBasic01.type01 > tr {
    display: block;
    width: auto !important;
  }
  .tbBasic01.type01 > tbody > tr > th, .tbBasic01.type01 > tbody > tr > td, .tbBasic01.type01 > tr > th, .tbBasic01.type01 > tr > td {
    text-align: left;
    display: block;
    width: auto !important;
    border-width: 1px 0 0 0;
  }
  .tbBasic01.type01 > tbody > tr > th, .tbBasic01.type01 > tr > th {
    white-space: normal;
  }
}

/*
# ベーシックなテーブルスタイル2 .tbBasic02

## ベーシックなテーブルスタイル2
```
<table class="tbBasic02">
	<thead>
		<tr><th>見出し</th><th>見出し</th></tr>
	</thead>
	<tbody>
		<tr><th>見出し</th><td>データ</td></tr>
		<tr><th>見出し</th><td>データ</td></tr>
		<tr><th>見出し</th><td>データ</td></tr>
	</tbody>
</table>
```
## 横幅 auto
継承クラス　`.autoW`
```
<table class="tbBasic02 autoW">
	<thead>
		<tr><th>見出し</th><th>見出し</th></tr>
	</thead>
	<tbody>
		<tr><th>見出し</th><td>データ</td></tr>
		<tr><th>見出し</th><td>データ</td></tr>
		<tr><th>見出し</th><td>データ</td></tr>
	</tbody>
</table>
```
## スマホでは一列表示になるスタイル
継承クラス　`type01`
```
<table class="tbBasic02 type01">
	<tr><th>見出し</th><td>データ</td></tr>
	<tr><th>見出し</th><td>データ</td></tr>
	<tr><th>見出し</th><td>データ</td></tr>
</table>
```
*/
.tbBasic02 {
  width: 100%;
  border-top: 2px solid #00b1a9;
  border-bottom: 2px solid #00b1a9;
  margin-bottom: 20px;
}
.tbBasic02:last-child {
  margin-bottom: 0;
}
.tbBasic02 > thead > tr > th {
  background-color: #00b1a9;
  color: #fff;
  font-weight: bold;
  white-space: nowrap;
  padding: 10px;
  text-align: center;
}
.tbBasic02 > tbody > tr > th, .tbBasic02 > tbody > tr > td {
  padding: 10px;
  border-bottom: 1px solid #ccc;
  text-align: left;
  vertical-align: top;
}
.tbBasic02 > tbody > tr > th {
  background-color: #eee;
  color: #000;
  font-weight: bold;
  width: 30%;
}
.tbBasic02 > tbody > tr:last-child > th, .tbBasic02 > tbody > tr:last-child > td {
  border-bottom: none;
}
.tbBasic02.autoW {
  width: auto;
}
.tbBasic02.autoW > tbody > tr > th {
  width: auto;
  white-space: nowrap;
}
.tbBasic02.type01 > tbody > tr > th {
  width: auto;
  white-space: nowrap;
}
@media only screen and (max-width: 767px) {
  .tbBasic02.type01 {
    display: block;
  }
  .tbBasic02.type01 > thead, .tbBasic02.type01 > thead > tr, .tbBasic02.type01 > thead > tr > th {
    display: block;
    white-space: normal;
  }
  .tbBasic02.type01 > tbody {
    display: block;
  }
  .tbBasic02.type01 > tbody > tr {
    display: block;
  }
  .tbBasic02.type01 > tbody > tr > th, .tbBasic02.type01 > tbody > tr > td {
    display: block;
    width: auto !important;
    white-space: normal;
  }
}

/*
# レスポンシブ対応 .wpTbResponsive01

`.wpTbResponsive01`で囲った範囲をスライドで表示
```
<div class="wpTbResponsive01">
	<table class="tbBasic01">
		<thead>
			<tr><th>見出し</th><th>見出し</th><th>見出し</th><th>見出し</th><th>見出し</th></tr>
		</thead>
		<tbody>
			<tr><th>見出し</th><td>データ</td><td>データ</td><td>データ</td><td>データ</td></tr>
			<tr><th>見出し</th><td>データ</td><td>データ</td><td>データ</td><td>データ</td></tr>
			<tr><th>見出し</th><td>データ</td><td>データ</td><td>データ</td><td>データ</td></tr>
		</tbody>
	</table>
</div>
```

*/
.wpTbResponsive01 {
  display: block;
  width: 100%;
  margin-bottom: 20px;
}
.wpTbResponsive01:last-child {
  margin-bottom: 0;
}
@media only screen and (max-width: 767px) {
  .wpTbResponsive01 {
    overflow-x: auto;
    white-space: nowrap;
  }
}

/*
# 装飾のないシンプルなテーブル .tbSimple01

```
<table class="tbSimple01">
	<tr><th>※1</th><td>注釈が入ります。注釈が入ります。注釈が入ります。<br>注釈が入ります。注釈が入ります。</td></tr>
	<tr><th>※2</th><td>注釈が入ります。注釈が入ります。</td></tr>
	<tr><th>※3</th><td>注釈が入ります。注釈が入ります。注釈が入ります。注釈が入ります。</td></tr>
</table>
```

*/
.tbSimple01 {
  width: auto !important;
  border: none !important;
  background: none !important;
  margin-bottom: 20px;
}
.tbSimple01:last-child {
  margin-bottom: 0;
}
.tbSimple01 > tbody > tr > th, .tbSimple01 > tbody > tr > td, .tbSimple01 > tr > th, .tbSimple01 > tr > td {
  text-align: left !important;
  vertical-align: top !important;
  width: auto !important;
  border: none !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.tbSimple01 > tbody > tr > th, .tbSimple01 > tr > th {
  white-space: nowrap;
  padding-right: 1em !important;
  font-weight: normal;
}

/*
# パネル .panel01

## パネルスタイル

```
<div class="inner01">
	<section class="panel01">
		<h2 class="titPanel01">パネルタイトル</h2>
		<div class="boxInner">
			<p>ここにコンテンツが入ります。</p>
		</div>
	</section>
</div>
```
## パネルタイトルのバリエーション　
```
<div class="inner01">
	<section class="panel01">
		<h2 class="titPanel01">
			<span class="boxInner">
				<span class="tit">お知らせ</span>
				<a class="batch">RSS</a>
			</span>
		</h2>
		<div class="boxInner">
			<p>ここにコンテンツが入ります。</p>
		</div>
	</section>
</div>
```
*/
.panel01 {
  background-color: #fff;
  overflow: hidden;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.panel01 > .pageLink01 > .titPanel01, .panel01 > .titPanel01 {
  border-bottom: 1px solid #8ed0c9;
  padding: 30px 60px;
  text-align: center;
  line-height: 1.2;
  font-size: 30px;
  font-size: 3rem;
  font-weight: normal;
  color: #00b1a9;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .panel01 > .pageLink01 > .titPanel01, .panel01 > .titPanel01 {
    padding: 30px;
  }
}
@media only screen and (max-width: 480px) {
  .panel01 > .pageLink01 > .titPanel01, .panel01 > .titPanel01 {
    padding: 20px 10px;
    font-size: 24px;
    font-size: 2.4rem;
  }
}
.panel01 > .pageLink01 > .titPanel01:after, .panel01 > .titPanel01:after {
  border-width: 20px 20px 0;
  border-color: #fff transparent transparent;
  display: block;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  z-index: 2;
  bottom: -19px;
  left: 50%;
  margin-left: -20px;
}
.panel01 > .pageLink01 > .titPanel01:before, .panel01 > .titPanel01:before {
  border-width: 20px 20px 0;
  border-color: #8ed0c9 transparent transparent;
  display: block;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  bottom: -20px;
  left: 50%;
  margin-left: -20px;
  z-index: 1;
}
.panel01 > .pageLink01 > .titPanel01 > .boxInner, .panel01 > .titPanel01 > .boxInner {
  display: table;
}
.panel01 > .pageLink01 > .titPanel01 > .boxInner > .tit, .panel01 > .pageLink01 > .titPanel01 > .boxInner > .batch, .panel01 > .titPanel01 > .boxInner > .tit, .panel01 > .titPanel01 > .boxInner > .batch {
  display: table-cell;
  width: 100%;
  vertical-align: middle;
}
.panel01 > .pageLink01 > .titPanel01 > .boxInner > .tit, .panel01 > .titPanel01 > .boxInner > .tit {
  text-align: left;
  color: #000;
}
.panel01 > .pageLink01 > .titPanel01 > .boxInner > .batch, .panel01 > .titPanel01 > .boxInner > .batch {
  font-size: 15px;
  font-size: 1.5rem;
  text-decoration: none;
  white-space: nowrap;
  padding: 10px;
  color: #00b1a9;
  font-weight: bold;
  text-align: right;
}
.panel01 > .pageLink01 > .boxInner, .panel01 > .boxInner {
  padding: 60px;
}
@media only screen and (max-width: 767px) {
  .panel01 > .pageLink01 > .boxInner, .panel01 > .boxInner {
    padding: 30px;
  }
}
@media only screen and (max-width: 480px) {
  .panel01 > .pageLink01 > .boxInner, .panel01 > .boxInner {
    padding: 20px 10px;
  }
}
.panel01 > .pageLink01 > .boxInner.style01, .panel01 > .boxInner.style01 {
  padding: 10px;
  background-color: #b2dfda;
}
.panel01 > .pageLink01 > .boxInner.style02, .panel01 > .boxInner.style02 {
  padding: 10px;
  background-color: #FCFCFC;
}
.panel01 > .pageLink01 > .boxInner + .boxInner, .panel01 > .boxInner + .boxInner {
  border-top: 1px solid #eee;
}

/*
# 汎用画像スタイル

## 丸い画像スタイル`.imgStyle01`

```
<div class="imgStyle01"><img src="/img/dummy/thumb01.gif"></div>
```
*/
.imgStyle01 img {
  border-radius: 100%;
}

/*
# 画像のサイズ・表示位置指定バリエーション

## 元のサイズより拡大しない設定　`.boxImg01`

```
<div class="boxImg boxImg01"><img src="/img/dummy/thumb01.gif"></div>
```
## 画像を縦横中央に配置　`.boxImg02`

```
<div class="boxImg boxImg02" style="height: 200px; border: 1px solid #ccc">
	<div class="boxInner"><img src="/img/dummy/thumb01.gif"></div>
</div>
```
*/
.boxImg01 {
  margin: 0 auto;
  text-align: center;
}
.boxImg01 > img {
  max-width: 100% !important;
  width: auto !important;
  height: auto;
}

.boxImg02 {
  display: table;
  width: 100%;
}
.boxImg02 > .boxInner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.boxImg02 > .boxInner > img {
  max-width: 100% !important;
  width: auto !important;
  height: auto;
}

/*
# .panel01 のなかに含まれるimgタグの設定

`.panel01`の中に含まれるimgの最大幅設定
*/
.panel01 img {
  max-width: 100%;
}

/*
# 一行テキスト、パスワード入力欄、テキストエリアのスタイル
```
<h3 class="titBasic03">一行テキスト</h3>
<p><input type="text"></p>
<h3 class="titBasic03">パスワード入力</h3>
<p><input type="password"></p>
<h3 class="titBasic03">テキストエリア</h3>
<p><textarea></textarea></p>
```
## 一行テキストのサイズバリエーション
```
<h3 class="titBasic03">.txtS</h3>
<p><input type="text" class="txtS">&nbsp;-&nbsp;<input type="text" class="txtS"></p>
<h3 class="titBasic03">.txtM</h3>
<p><input type="text" class="txtM"></p>
<h3 class="titBasic03">.txtL</h3>
<p><input type="text" class="txtL"></p>
```
*/
input[type=text],
input[type=password],
textarea {
  padding: 10px;
  border-radius: 3px;
  border: 1px solid #ccc;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  font-size: 15px;
  font-size: 1.5rem;
}

input[type=text].txtS {
  width: 20%;
}
@media only screen and (max-width: 767px) {
  input[type=text].txtS {
    width: 20%;
  }
}
input[type=text].txtM {
  width: 60%;
}
input[type=text].txtL {
  width: 100%;
}
@media only screen and (max-width: 767px) {
  input[type=text].txt_name {
    width: 80%;
  }
}
@media only screen and (max-width: 767px) {
  input[type=text]#prefecture {
    width: 60%;
  }
}
@media only screen and (max-width: 767px) {
  input[type=text]#flets_pref {
    width: 60%;
  }
}
input[type=text].hasDatepicker {
  width: 50%;
}
@media only screen and (max-width: 767px) {
  input[type=text]#account {
    width: 60%;
  }
}
@media only screen and (max-width: 767px) {
  input[type=text]#fletsPref {
    width: 60%;
  }
}
@media only screen and (max-width: 767px) {
  input[type=text]#introcode {
    width: 60%;
  }
}
@media only screen and (max-width: 767px) {
  input[type=text]#intro_code {
    width: 60%;
  }
}

/*姓名（pc：間空ける、sp：改行）*/
.name_br-sp {
  margin: 0 5px;
}
@media only screen and (max-width: 767px) {
  .name_br-sp {
    display: block;
    margin: 10px 0 0 0;
  }
}

/*
# セレクトボタンのスタイル
```
<select name="">
	<option>選択肢1</option>
	<option>選択肢2</option>
	<option>選択肢3</option>
</select>
```
*/
select {
  border-radius: 3px;
  border: 1px solid #ccc;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  max-width: 100%;
  min-height: 30px;
  font-size: 15px;
  font-size: 1.5rem;
}

/*
# チェックボックス、ラジオボタンのラベルスタイル

## スマートフォンでもタップしやすいブロック表示
```
<label><input type="checkbox">ラベル1</label>
```
## チェックボックスやラジオボタンのリスト表示スタイル`.ulForm01`

```
<ul class="ulForm01">
	<li><label><input type="checkbox">ラベル1</label></li>
	<li><label><input type="checkbox">ラベル2</label></li>
	<li><label><input type="checkbox">ラベル3</label></li>
</ul>
```
*/
label {
  font-size: 15px;
  font-size: 1.5rem;
}
@media only screen and (max-width: 767px) {
  label {
    display: block;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
  }
  label.other {
    border-bottom: none;
    border-radius: 3px 3px 0 0;
  }
  label.other + .txtOther {
    padding: 0 10px 10px;
    border-radius: 0 0 3px 3px;
    border: 1px solid #ccc;
    border-top: none;
  }
}

@media only screen and (max-width: 767px) {
  .ulForm01 > li {
    margin-bottom: 3px;
  }
  .ulForm01 > li:last-child {
    margin-bottom: 0;
  }
}

/*
# ボタンスタイル

```
<input type="button" value="ボタン">
<input type="submit" value="送信">
<input type="reset" value="リセット">
```
##ボタンをセンタリングで表示
```
<div class="btnBox">
	<input type="button" value="ボタン">
	<input type="submit" value="送信">
	<input type="reset" value="リセット">
</div>
```
*/
input[type=button],
input[type=submit],
input[type=reset] {
  font-size: 15px;
  font-size: 1.5rem;
  padding: 10px;
  border-radius: 3px;
  border: 1px solid #009891;
  background-color: #00b1a9;
  color: #fff;
  min-width: 100px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
}

.btnBox {
  text-align: center;
}

/*住所検索ボタンの位置(スマホ)*/
@media only screen and (max-width: 767px) {
  .add_srh {
    display: block;
    width: 90%;
    margin: 10px auto 0 auto;
  }
}

/*
# フォーム関連のテキストスタイル

## 必須項目のスタイル`.txtMust01`

```
<span class="txtMust01">*</span>
```
## 例文のスタイル`.txtExample01`

```
<p class="txtExample01">例）221-0052</p>
```
## センター寄せの文章のスタイル`.txtForm01`

```
<p class="txtForm01">キーワードは1つのみ入力してください。 例）ご利用料金</p>
```
*/
.txtMust01 {
  /*color: $red;*/
  color: #fff;
  background: #ff4200;
  border-radius: 3px;
  padding: 0 5px;
  margin-left: 5px;
  line-height: 1.5;
  display: inline-block;
}

.txtExample01 {
  font-size: 13px;
  font-size: 1.3rem;
  color: #999999;
}

.txtForm01 {
  text-align: center;
  color: #999999;
}

/*
# テキストエリアとボタンを並べて表示`.boxForm01`

```
<div class="boxForm01">
	<input type="text">
	<input type="submit" value="検索">
</div>
```
*/
.boxForm01 {
  display: table;
  width: 100%;
  margin: 0 auto 20px;
  max-width: 600px;
}
.boxForm01:last-child {
  margin-bottom: 0;
}
.boxForm01 > input[type=text] {
  display: table-cell;
  width: 70%;
  border-radius: 3px 0 0 3px;
}
.boxForm01 > input[type=button], .boxForm01 > input[type=submit], .boxForm01 > input[type=reset] {
  display: table-cell;
  width: 30%;
  border-radius: 0 3px 3px 0;
  min-width: auto;
}

/*
# セカンダリDNSサービス/逆引き権限委譲サービス　申し込みフォーム用個別設定
*/
.cellDNS01,
.cellDNS02,
.cellDNS03,
.cellDNS04 {
  padding: 4px;
}
@media only screen and (max-width: 767px) {
  .cellDNS01,
  .cellDNS02,
  .cellDNS03,
  .cellDNS04 {
    padding: 5px 10px;
    border-top: none;
  }
  .cellDNS01:first-child,
  .cellDNS02:first-child,
  .cellDNS03:first-child,
  .cellDNS04:first-child {
    border-top: 1px solid #eee;
  }
  .cellDNS01:last-child,
  .cellDNS02:last-child,
  .cellDNS03:last-child,
  .cellDNS04:last-child {
    padding-bottom: 20px;
  }
}

@media only screen and (max-width: 767px) {
  .cellDNS04:before, .cellDNS03:before, .cellDNS02:before {
    display: block;
    font-weight: bold;
    color: #333;
  }
  .cellDNS04:after, .cellDNS03:after, .cellDNS02:after {
    display: block;
    text-align: right;
    color: #999999;
    font-size: 13px;
    font-size: 1.3rem;
  }
  .cellDNS00 {
    vertical-align: middle;
  }
  .cellDNS00:before {
    content: "プライマリDNSサーバ";
    display: inline-block;
  }
  .cellDNS00 i {
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    border-radius: 100%;
    background-color: #333;
    color: #fff;
    display: inline-block;
    margin-left: 10px;
  }
  .cellDNS01 {
    display: table;
    width: 100%;
    background-color: transparent;
  }
  .cellDNS01:before {
    content: "ご希望の処理";
    display: table-cell;
    vertical-align: top;
    padding-right: 10px;
  }
  .cellDNS01 > ul {
    display: table-cell;
    vertical-align: top;
  }
  .cellDNS02:before {
    content: "ドメイン名";
  }
  .cellDNS02:after {
    content: "例：example.jp";
  }
  .cellDNS03:before {
    content: "ホスト名";
  }
  .cellDNS03:after {
    content: "例：ns.example.jp";
  }
  .cellDNS04:before {
    content: "IPアドレス";
  }
  .cellDNS04:after {
    content: "例：192.168.99.9";
  }
}
.ui-datepicker-trigger {
  margin-left: 10px;
  padding: 10px;
  border-radius: 4px;
  background-color: #00b1a9;
  border: 1px solid #eee;
  color: #fff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
}

@media only screen and (max-width: 480px) {
  .ui-datepicker-trigger {
    margin-top: 5px;
  }
}
/*固定IP頼めない場合もある*/
#radioRentalip .variable-msg {
  color: #ff4200;
  padding: 10px;
  border: solid 1px #ff4200;
  font-weight: bold;
  margin-bottom: 10px;
  display: none;
}

#radioRentalip.no-rental .variable-msg {
  display: inline-block;
}
#radioRentalip.no-rental label.noip {
  color: #999999;
}

#boxErrorMsg {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 101;
  width: 700px;
  height: 200px;
  color: #ff4200;
  background: #fff;
  padding: 20px 40px;
  box-sizing: border-box;
  border: solid 5px #ff4200;
  font-weight: bold;
  text-align: center;
  display: none;
}
@media only screen and (max-width: 767px) {
  #boxErrorMsg {
    width: 95%;
    padding: 10px;
    bottom: 100px;
  }
}
#boxErrorMsg .exl {
  margin: 0 auto;
  width: 35px;
  height: 35px;
  background: #ff4200;
  color: #fff;
  border-radius: 50%;
  line-height: 1.5;
  font-size: 20px;
}
#boxErrorMsg .titErrorMsg {
  font-size: 18px;
  font-size: 1.8rem;
  margin-bottom: 20px;
}
@media only screen and (max-width: 767px) {
  #boxErrorMsg .titErrorMsg {
    margin-bottom: 10px;
  }
}

#boxErrorMsg.no-rental {
  display: block;
}

/* ★ highlight-flash：２回チカチカ点滅 */
.highlight-flash {
  /* 0.5s × 2 回 = 合計1s */
  animation: flash 0.5s ease-in-out 0s 2;
}

@keyframes flash {
  0%, 100% {
    box-shadow: 0 0 0 0 transparent;
  }
  50% {
    box-shadow: 0 0 0 3px #ffbf47;
  }
}
#rentalip {
  vertical-align: middle;
}

.checkboxLabel-txtS {
  font-weight: bold;
  vertical-align: middle;
  color: #333;
}

#rentalip_pref_wrap {
  margin-top: 10px;
}

/*
# ページ内リンク用クラス

下記のクラスを利用することで、
ヘッダーが固定のページでもアンカーリンクを正しい位置に表示することができます。

* ページ内リンク用クラス `.pageLink01`
* ページ内リンク用ラッパークラス `.wpPageLink01`

`.wpPageLink01`で囲むことで、前後のセクションと
レイヤーがかぶることにより生じる、リンク判定のエラーを回避できます。

※`.pageLink01`は、他クラスとの併用をさけ、単体で使用するようにしてください。
paddingやmarginの設定に影響が及び、うまく動かないことがあります。

```
<section class="section01 wpPageLink01">
	<div class="pageLink01" id="section01">
		<h2 class="titBasic01">見出し</h2>
		<p>本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
		本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。</p>
		<p class="btn01"><a href="#">ボタン</a></p>
	</div>
</section>
<section class="section01 wpPageLink01">
	<div class="pageLink01" id="section02">
		<h2 class="titBasic01">見出し</h2>
		<p>本文が入ります。本文が入ります。本文が入ります。本文が入ります。<br>
		本文が入ります。本文が入ります。本文が入ります。本文が入ります。本文が入ります。</p>
	</div>
</section>

```
*/
.pageLink01 {
  padding-top: 85px;
  margin-top: -85px;
  vertical-align: top;
}
@media only screen and (max-width: 767px) {
  .pageLink01 {
    padding-top: 60px;
    margin-top: -60px;
  }
}

.wpPageLink01 {
  overflow: hidden;
}

/*
# デバイスごとの表示切り替え

デバイス毎に非表示にするクラス
* .hidSP
* .hidTablet
* .hidPC

```
<p class="hidSP">hidSP</p>
<p class="hidTablet">hidTablet</p>
<p class="hidPC">hidPC</p>

```
*/
@media only screen and (max-width: 767px) {
  .hidSP {
    display: none !important;
  }
}

@media only screen and (min-width: 768px) and (max-width: 999px) {
  .hidTablet {
    display: none !important;
  }
}

@media only screen and (min-width: 1000px) {
  .hidPC {
    display: none !important;
  }
}

/*
# スペースの設定

* .space01 （大）
* .space02　（やや大）
* .space03　（レギュラー）
* .space04　（小）
*/
.space01 {
  clear: both;
  height: 60px;
}

.space02 {
  clear: both;
  height: 30px;
}

.space03 {
  clear: both;
  height: 20px;
}

.space04 {
  clear: both;
  height: 10px;
}

/*
# センタリング

囲った範囲をセンタリングで表示する`.boxCenter01`

```
<div class="boxCenter01">
	<p>センタリングで表示されています。<br>センタリングで表示されています。<br>センタリングで表示されています。</p>
</div>

```
*/
.boxCenter01 {
  text-align: center;
}

/*
# 囲み枠

## .boxEnclosure01
囲み枠1 `.boxEnclosure01`

```
<div class="inner01">
	<div class="boxEnclosure01">
		<p>コンテンツが入ります。</p>
	</div>
</div>

```
## .boxEnclosure02
囲み枠2 `.boxEnclosure02`

```
<div class="inner01">
	<div class="boxEnclosure02">
		<p>コンテンツが入ります。</p>
	</div>
</div>

```
*/
.boxEnclosure01, .boxEnclosure02 {
  margin: 20px 0;
  padding: 20px;
  background-color: #fcfcfc;
  border: 1px solid #eee;
}
.boxEnclosure01:first-child, .boxEnclosure02:first-child {
  margin-top: 0;
}
.boxEnclosure01:last-child, .boxEnclosure02:last-child {
  margin-bottom: 0;
}
.tit01 + .boxEnclosure01, .tit01 + .boxEnclosure02, .tit02 + .boxEnclosure01, .tit02 + .boxEnclosure02, .titBasic01 + .boxEnclosure01, .titBasic01 + .boxEnclosure02, .titBasic02 + .boxEnclosure01, .titBasic02 + .boxEnclosure02, .titBasic03 + .boxEnclosure01, .titBasic03 + .boxEnclosure02, .titBasic04 + .boxEnclosure01, .titBasic04 + .boxEnclosure02 {
  margin-top: 0;
}

.form_psn-info {
  height: 250px;
  overflow: scroll;
}

.boxEnclosure02 {
  background-color: transparent;
  border: 3px double #eee;
}

/*
# アイコン

## .icoLogo01
ロゴアイコン `.icoLogo01`

```
<i class="icoLogo01">ちょっパヤ!ネット</i>
<p class="btn01"><a href="#"><i class="icoLogo01">ちょっパヤ!ネット</i>でお得！</a></p>

```
## .icoRss01
RSSアイコン `.icoRss01`

```
<i class="icoRss01">RSSアイコン</i>

```
*/
.icoRss01, .icoLogo01 {
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 999999px;
}

.icoLogo01 {
  width: 120px;
  height: 30px;
  background: url(/common/img/logo01.svg) 50% 50% no-repeat;
  -webkit-background-size: 120px auto;
  background-size: 120px auto;
}
@media only screen and (min-width: 768px) and (max-width: 999px) {
  .icoLogo01 {
    width: 100px;
    height: 25px;
    -webkit-background-size: 100px auto;
    background-size: 100px auto;
  }
}

.icoRss01 {
  width: 20px;
  height: 20px;
  background: url("/common/img/sprite_ico01.png") 0 -20px no-repeat;
  -webkit-background-size: 40px auto;
  background-size: 40px auto;
}

.inq_mail {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
  font-size: 1.5rem;
  color: #333;
  font-weight: bold;
  margin-bottom: 3px !important;
}
@media only screen and (max-width: 767px) {
  .inq_mail {
    margin-bottom: 10px !important;
    justify-content: center;
  }
}
.inq_mail::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  background: url(/common/img/sprite_ico01.png) 0 -60px no-repeat;
  -webkit-background-size: 40px auto;
  background-size: 41px auto;
}

.sp_center {
  text-align: center;
}
.infoBox {
  border: solid 2px #dadfe1;
  padding: 15px;
  margin-bottom: 20px;
}
.infoBox p {
  color: #ff0000;
}
.infoBox p a {
  color: #ff0000;
  text-decoration: underline;
}
.infoBox p a:hover {
  color: #E44E00;
}
.infoBox.style02 {
  display: flex;
  justify-content: center;
  border: none;
  padding: 0;
  margin-top: 5px;
  margin-bottom: 0;
  font-size: 1.2rem;
}

.tel_mail {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.boxEnclosure01.form, .form.boxEnclosure02 {
  text-align: left;
}

.form .titBasic03 {
  text-align: center;
  border-bottom: dotted 1px #d3d3d3;
  padding-bottom: 15px;
}

/*
# ページごとの個別スタイル
※サイト規模によってはさらにファイルを分けること
*/
/*
# トップページメインビジュアル
*/
#mv {
  padding: 0;
}
@media only screen and (min-width: 768px) and (max-width: 999px) {
  #mv {
    padding-top: 124px;
  }
}
@media only screen and (max-width: 767px) {
  #mv {
    padding-top: 60px;
  }
}
#mv .ulSlide01 {
  position: relative;
}
#mv .ulSlide01 .slick-list {
  height: 60vw;
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 1000px) {
  #mv .ulSlide01 .slick-list {
    height: 100vh;
  }
}
#mv .ulSlide01 .slick-slide {
  padding: 0;
}
#mv .ulSlide01 .slick-slide.txt {
  position: relative;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: 50% 0;
  background-color: #fff;
  width: 100%;
  height: 60vw;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
@media only screen and (min-width: 1000px) {
  #mv .ulSlide01 .slick-slide.txt {
    height: 100vh;
  }
}
#mv .ulSlide01 .slick-slide.txt .btn_campaign {
  position: absolute;
  right: 0;
  bottom: 30px;
  width: 550px;
}
#mv .ulSlide01 .slick-slide.txt .btn_campaign img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 1000px) {
  #mv .ulSlide01 .slick-slide.txt .btn_campaign {
    width: 400px;
  }
}
@media screen and (max-width: 769px) {
  #mv .ulSlide01 .slick-slide.txt .btn_campaign {
    width: 200px;
    bottom: 0px;
  }
}
#mv .ulSlide01 .slick-slide.txt .wp {
  vertical-align: middle;
  text-align: center;
  height: 60vw;
  display: table;
  width: 100%;
  overflow: hidden;
  table-layout: fixed;
}
@media only screen and (min-width: 1000px) {
  #mv .ulSlide01 .slick-slide.txt .wp {
    height: 100vh;
  }
}
#mv .ulSlide01 .slick-slide.txt .wp .inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding: 10px 30px;
}
@media only screen and (min-width: 1000px) {
  #mv .ulSlide01 .slick-slide.txt .wp .inner {
    padding: 141px 30px 10px;
  }
}
#mv .ulSlide01 .slick-slide.txt .wp .inner.ptn2 {
  padding: 10px 50px 10px 0px;
}
@media only screen and (min-width: 1000px) {
  #mv .ulSlide01 .slick-slide.txt .wp .inner.ptn2 {
    padding: 141px 30px 10px;
  }
}
#mv .ulSlide01 .slick-slide.txt img {
  width: 100%;
  height: auto;
  margin: 0 auto;
  max-width: 100%;
}
@media only screen and (min-width: 1000px) {
  #mv .ulSlide01 .slick-slide.txt img {
    width: auto;
  }
}
#mv .ulSlide01 .slick-slide.txt.left .wp:after {
  content: "";
  display: table-cell;
}
#mv .ulSlide01 .slick-slide.txt.right .wp:before {
  content: "";
  display: table-cell;
}
#mv .ulSlide01 .slick-slide.txt.both .wp .inner-cta {
  padding-top: 410px;
}
#mv .ulSlide01 .slick-slide.txt.both .wp .inner-cta img:first-child {
  max-width: 420px;
}
@media only screen and (min-width: 1000px) and (max-width: 1599px) {
  #mv .ulSlide01 .slick-slide.txt.both .wp .inner-cta {
    padding-top: 160px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 999px) {
  #mv .ulSlide01 .slick-slide.txt.both .wp .inner-cta {
    padding-top: 160px;
  }
}
@media only screen and (max-width: 767px) {
  #mv .ulSlide01 .slick-slide.txt.both .wp .inner-cta {
    padding-top: 70px;
  }
}
#mv .ulSlide01 .slick-dots {
  position: absolute;
  z-index: 2;
  bottom: 10px;
  width: 100%;
  left: 0;
}
@media only screen and (max-width: 767px) {
  #mv .ulSlide01 .slick-dots {
    display: none !important;
  }
}
#mv .btn01 {
  margin: 10px auto 0;
  width: 100%;
  max-width: 300px;
  min-width: 0;
}
@media only screen and (max-width: 767px) {
  #mv .btn01 {
    height: 30px;
    border-radius: 15px;
  }
}
@media only screen and (max-width: 767px) {
  #mv .btn01 a {
    font-size: 11px;
    font-size: 1.1rem;
    border-radius: 15px;
  }
}

/*
# トップページ Feature
*/
.indexFeature01 .boxContent {
  border-left: 1px solid #eee;
}
@media only screen and (max-width: 767px) {
  .indexFeature01 .boxContent.family {
    background-color: #009891;
  }
  .indexFeature01 .boxContent.gamers {
    background-color: #0052a4;
  }
  .indexFeature01 .boxContent.administrator {
    background-color: #70a400;
  }
}
.indexFeature01 .boxTxt {
  text-align: center;
  position: relative;
}
.indexFeature01 .boxTxt > .inner {
  padding: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 999px) {
  .indexFeature01 .boxTxt > .inner {
    padding: 20px 10px;
  }
}

.titFeature01 {
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  color: #fff;
  line-height: 1.2;
  display: table;
  height: 80px;
  font-size: 18px;
  font-size: 1.8rem;
}
@media only screen and (min-width: 1600px) {
  .titFeature01 {
    font-size: 24px;
    font-size: 2.4rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 999px) {
  .titFeature01 {
    font-size: 15px;
    font-size: 1.5rem;
  }
}
@media only screen and (min-width: 768px) {
  .titFeature01 {
    position: absolute;
    left: 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 999px) {
  .titFeature01 {
    height: 60px;
    top: -60px;
  }
}
@media only screen and (min-width: 1000px) {
  .titFeature01 {
    height: 80px;
    top: -80px;
  }
}
.titFeature01 .inner {
  display: table-cell;
  vertical-align: middle;
  padding: 0;
}
.family .titFeature01 {
  background-color: rgba(0, 152, 145, 0.8);
}
.gamers .titFeature01 {
  background-color: rgba(0, 82, 164, 0.8);
}
.administrator .titFeature01 {
  background-color: rgba(112, 164, 0, 0.8);
}
.titFeature01 .en {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  display: block;
  font-size: 13px;
  font-size: 1.3rem;
}
@media only screen and (min-width: 768px) and (max-width: 999px) {
  .titFeature01 .en {
    font-size: 11px;
    font-size: 1.1rem;
  }
}

/*
# トップページ サービス紹介
*/
.indexService01 .boxImg {
  position: relative;
}
.indexService01 .boxImg img {
  z-index: 2;
  width: 120px !important;
  height: auto;
  position: relative;
}
.indexService01 .boxImg:before {
  z-index: 1;
  content: "";
  display: block;
  width: 110px;
  height: 110px;
  background-color: #e6e6e6;
  border-radius: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -55px;
  margin-left: -55px;
}
.indexService01 .boxTxt {
  text-align: center;
}

/*
# トップページ 下院サポート
*/
.indexSupport01 .boxImg {
  text-align: center;
  vertical-align: middle;
  height: 130px;
}
.indexSupport01 .boxImg img {
  width: auto;
  height: auto;
  max-width: 100%;
  padding: 30px;
}
@media only screen and (max-width: 480px) {
  .indexSupport01 .boxImg img {
    padding: 10px;
  }
}

.indexSupport02 .boxImg {
  text-align: center;
}
.indexSupport02 .boxImg img {
  width: auto;
  height: auto;
  max-width: 100%;
}

/*
# よくあるご質問　flexibleSearch
*/
.fs-paginate {
  padding-top: 20px;
}
.fs-paginate ul {
  display: table;
  width: auto;
  margin: 0 auto;
}
.fs-paginate ul li {
  display: table-cell;
  padding: 5px;
}
.fs-paginate ul li > span {
  display: table;
}
.fs-paginate ul li > span > a {
  display: table-cell;
  width: 30px;
  height: 30px;
  vertical-align: middle;
  text-align: center;
  background-color: #eee;
  color: #00b1a9;
  border-radius: 3px;
  text-decoration: none;
  position: relative;
}
.fs-paginate ul li.fs-current > span > a {
  background-color: #00b1a9;
  color: #fff;
}
.fs-paginate ul li.fs-next, .fs-paginate ul li.fs-prev {
  overflow: hidden;
  text-indent: -99999px;
}
.fs-paginate ul li.fs-next > span > a:before, .fs-paginate ul li.fs-next > span > a:after, .fs-paginate ul li.fs-prev > span > a:before, .fs-paginate ul li.fs-prev > span > a:after {
  content: "";
  display: block;
  width: 2px;
  height: 13px;
  background-color: #00b1a9;
  position: absolute;
}
.fs-paginate ul li.fs-next > span > a:before, .fs-paginate ul li.fs-prev > span > a:before {
  top: 2px;
}
.fs-paginate ul li.fs-next > span > a:after, .fs-paginate ul li.fs-prev > span > a:after {
  bottom: 2px;
}
.fs-paginate ul li.fs-next > span > a:before, .fs-paginate ul li.fs-next > span > a:after {
  left: 18px;
}
.fs-paginate ul li.fs-next > span > a:before {
  -webkit-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  transform: rotate(-30deg);
}
.fs-paginate ul li.fs-next > span > a:after {
  -webkit-transform-origin: center top;
  -ms-transform-origin: center top;
  transform-origin: center top;
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}
.fs-paginate ul li.fs-prev > span > a:before, .fs-paginate ul li.fs-prev > span > a:after {
  left: 10px;
}
.fs-paginate ul li.fs-prev > span > a:before {
  -webkit-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}
.fs-paginate ul li.fs-prev > span > a:after {
  -webkit-transform-origin: center top;
  -ms-transform-origin: center top;
  transform-origin: center top;
  -webkit-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  transform: rotate(-30deg);
}

/*
# ユーザアカウント検索プログラム
*/
#txtAcount01 {
  font-size: 24px;
  font-size: 2.4rem;
  text-align: center;
  color: #000;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
}

/*
# 利用規約
*/
.olRule01 {
  margin-bottom: 20px;
}

.olRule01:last-child {
  margin-bottom: 0;
}

.olRule01 > li {
  list-style: decimal;
  margin-left: 1em;
  text-indent: 0;
  line-hegith: 1.5em;
}

.olRule01 > li.list_first {
  list-style: none;
  margin-left: auto;
}

.olRule02 {
  margin: 2em;
}

.olRule02:last-child {
  margin-bottom: 0;
}

.olRule02 > li {
  list-style-type: none;
  list-style-position: inside;
  counter-increment: cnt;
  padding-left: 2em;
  position: relative;
}

.olRule02 > li:before {
  display: marker;
  content: counter(cnt) " ) ";
  position: absolute;
  left: 0;
  top: 0;
}

.ScrollBox {
  background: #eee none repeat scroll 0 0;
  height: 60vh;
  margin: auto;
  overflow-x: hidden;
  padding: 10px;
}

.campaign .col2 {
  margin-top: 30px;
}
.campaign .col2 .btn01 {
  margin: 0 auto;
}
.campaign .col2 .btn01:first-child {
  margin-bottom: 0 !important;
}
@media only screen and (min-width: 768px) {
  .campaign .col2 {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: space-around;
    align-content: flex-start;
  }
}
@media only screen and (max-width: 767px) {
  .campaign .col2 {
    flex-direction: column;
  }
  .campaign .col2 .btn01:first-child {
    margin-bottom: 15px !important;
  }
}
.campaign .cateTtl i {
  width: 15px;
}
.campaign .campaign_step {
  margin-bottom: 30px;
}
.campaign .campaign_step dt {
  color: #009891;
  font-weight: bold;
  font-size: 20px;
  font-size: 2rem;
  margin-bottom: 10px;
}
.campaign .campaign_step dd {
  margin-bottom: 30px;
}
.campaign .chuList02 li {
  margin-left: 1.5em;
  text-indent: -1.5em;
}
.campaign .img {
  margin-bottom: 40px;
  text-align: center;
}
.campaign .img img {
  max-width: 100%;
}

span.recom {
  font-size: 13px;
  padding: 2px;
  background-color: red;
  color: #fff;
  margin-left: 5px;
  border-radius: 3px;
  vertical-align: middle;
}

.atten {
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .atten {
    text-align: left;
  }
}

.gridtab > dt {
  cursor: pointer;
  color: #333333;
  font-weight: bold;
}

.gridtab--0 > dt {
  padding: 10px 20px !important;
  border: solid 1px #ddd !important;
}

.gridtab--0 > dd {
  border: solid 1px #ddd !important;
  padding: 15px !important;
}
@media only screen and (max-width: 767px) {
  .gridtab--0 > dd {
    padding: 5px !important;
  }
}

#basetab .basetab_item {
  display: none;
}
#basetab .basetab_item.active {
  display: block;
}

ol, ul.basetab_btnwrap {
  margin-bottom: 0;
}

.basetab {
  margin-left: 2px;
}
.basetab .basetab_btnwrap {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  margin-bottom: 0;
}
.basetab .basetab_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -2px 0 0 -2px;
  width: 50%;
  cursor: pointer;
  color: #333333;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: bold;
  padding: 8px 20px;
  background: #EAEAEA;
  border-bottom: solid 2px #00b1a9;
  box-sizing: border-box;
  transition: background 0.5s;
  border-radius: 10px 10px 0 0;
}
@media only screen and (max-width: 767px) {
  .basetab .basetab_btn {
    font-size: 1.2rem;
    line-height: 1.4;
    padding: 8px 10px 8px 20px;
  }
}
.basetab .basetab_btn span {
  position: relative;
}
.basetab .basetab_btn span::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -3.5rem;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 26px;
  height: 26px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background: #00b1a9;
}
@media only screen and (max-width: 767px) {
  .basetab .basetab_btn span::before {
    width: 16px;
    height: 16px;
    left: -2.2rem;
  }
}
.basetab .basetab_btn span::after {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
  left: calc(-3.5rem + 7px);
  width: 7px;
  height: 7px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
@media only screen and (max-width: 767px) {
  .basetab .basetab_btn span::after {
    width: 4px;
    height: 4px;
    left: calc(-2.2rem + 4px);
  }
}
.basetab .basetab_btn.active {
  background: #00b1a9;
  border-bottom: none;
  padding: 15px 20px;
  color: #fff;
}
@media only screen and (max-width: 767px) {
  .basetab .basetab_btn.active {
    height: 60px;
    padding: 8px 10px 8px 20px;
  }
}
.basetab .basetab_btn.active span::before {
  background: #fff;
}
.basetab .basetab_btn.active span::after {
  border-top: 2px solid #00b1a9;
  border-right: 2px solid #00b1a9;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  top: -2px;
  left: calc(-3.5rem + 8.5px);
}
@media only screen and (max-width: 767px) {
  .basetab .basetab_btn.active span::after {
    left: calc(-2.2rem + 5px);
  }
}
.basetab .basetab_item > dt {
  display: none;
}
.basetab .basetab_item > dd {
  margin: -2px 0 0 -2px;
  border: solid 1px #ddd;
  padding: 50px 40px;
}
@media only screen and (max-width: 767px) {
  .basetab .basetab_item > dd {
    padding: 20px 8px;
  }
}

.no-pc {
  display: none;
}
@media only screen and (max-width: 767px) {
  .no-pc {
    display: block;
  }
}

@media only screen and (max-width: 767px) {
  .no-sp {
    display: none;
  }
}

.faqList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media only screen and (max-width: 767px) {
  .faqList {
    flex-direction: column;
  }
}
.faqList li {
  width: 49%;
  margin-bottom: 30px;
}
@media only screen and (max-width: 767px) {
  .faqList li {
    width: 100%;
  }
}
.faqList li .cateTit {
  color: #333;
  font-size: 17px;
  font-size: 1.7rem;
  text-align: center;
  border-bottom: #8ED0C9 2px solid;
  padding-bottom: 5px;
  margin-bottom: 15px;
  font-weight: bold;
}

#container .panel01 .inq_wrap {
  margin-bottom: 40px;
}
#container .panel01 .inq_wrap .btn01 {
  margin: 30px 0;
}
@media only screen and (max-width: 767px) {
  #container .panel01 .inq_wrap .btn01 {
    margin: 30px auto;
  }
}
#container .panel01 .inq_wrap:last-child {
  margin-bottom: 0;
}
#container .panel01 .inq_wrap .ann {
  margin-bottom: 0;
  width: 100%;
}
@media only screen and (max-width: 767px) {
  #container .panel01 .inq_wrap .ann {
    text-align: left;
    font-size: 1.2rem;
  }
}
#container .panel01 .inq_wrap p {
  margin-bottom: 0;
}
#container .panel01 .inq_wrap .check_txt01 {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  font-weight: bold;
  margin-bottom: 10px;
  line-height: 1.3;
  margin-top: 20px;
}
@media only screen and (max-width: 767px) {
  #container .panel01 .inq_wrap .check_txt01 {
    font-size: 1.2rem !important;
    margin-bottom: 0;
  }
}
#container .panel01 .inq_wrap .check_txt01 span {
  border-radius: 30px;
  margin-right: 5px;
  background-color: #00b1a9;
  padding: 3px 15px;
  box-sizing: border-box;
  color: #fff;
  font-weight: bold;
  font-size: 1.2rem;
}
@media only screen and (max-width: 767px) {
  #container .panel01 .inq_wrap .check_txt01 span {
    padding: 3px 8px;
    font-size: 1.1rem;
  }
}

.tel_info_wrap {
  margin-top: 20px;
}
@media only screen and (max-width: 767px) {
  .tel_info_wrap {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
}
.tel_info_wrap .name {
  font-size: 1.5rem;
  margin-bottom: 0 !important;
  font-weight: bold;
  margin-bottom: 10px;
  line-height: 1;
}
@media only screen and (max-width: 767px) {
  .tel_info_wrap .name {
    margin-bottom: 0;
  }
}
.tel_info_wrap .phone {
  padding: 0;
  line-height: 1;
  margin-bottom: 6px;
}
.tel_info_wrap .phone p:nth-child(1) {
  font-family: sofia-pro, sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 3.1rem;
  margin-bottom: 5px;
}
@media only screen and (max-width: 767px) {
  .tel_info_wrap .phone p:nth-child(1) {
    font-size: 2.5rem;
  }
}
.tel_info_wrap .phone p:nth-child(1) .icon {
  width: 0.8em;
  height: 0.8em;
  vertical-align: middle;
  margin-right: 8px;
}
.tel_info_wrap .phone p:nth-child(1) span {
  vertical-align: middle;
  display: inline-block;
  margin-bottom: 3px;
}
.tel_info_wrap .phone p:nth-child(2) {
  margin-top: 0;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tel_info_wrap .phone p:nth-child(2) span {
  display: inline-block;
  background-color: #00b1a9;
  color: #fff;
  padding: 5px 8px;
  border-radius: 11px;
  vertical-align: middle;
  font-size: 1rem;
  margin-right: 0.5em;
}

.link_area_list {
  display: flex;
  align-items: flex-start;
}
@media only screen and (max-width: 767px) {
  .link_area_list {
    flex-direction: column;
  }
}
.link_area_list li {
  margin-right: 20px;
}
@media only screen and (max-width: 767px) {
  .link_area_list li {
    margin-right: 0;
  }
}

h3.lower_tit03 {
  background: #1D4847 0% 0% no-repeat padding-box;
  box-shadow: inset 0px 0px 13px rgba(2, 177, 169, 0.3764705882);
  font-size: 2rem;
  padding: 10px 15px;
  font-weight: bold;
  margin-top: 50px;
  margin-bottom: 30px;
}
@media only screen and (max-width: 767px) {
  h3.lower_tit03 {
    margin-top: 15px;
    margin-bottom: 15px;
  }
}

#wpContainer .inq_spt_btnList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media only screen and (max-width: 767px) {
  #wpContainer .inq_spt_btnList {
    text-align: center;
    flex-direction: column;
  }
}
#wpContainer .inq_spt_btnList li {
  display: inline-block;
  margin-bottom: 30px;
  width: 48%;
}
@media only screen and (max-width: 767px) {
  #wpContainer .inq_spt_btnList li {
    margin-right: 0;
    width: 100%;
  }
}
#wpContainer .inq_spt_btnList li:last-child {
  margin-right: 0;
}
#wpContainer .inq_spt_btnList li a {
  background-color: #fff;
  padding: 10px 30px 10px 15px;
  box-sizing: border-box;
  color: #666;
  display: flex;
  border: solid 1px #D6D6D6;
  font-weight: bold;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  margin-bottom: 15px;
  position: relative;
  text-decoration: none;
  line-height: 1.3;
  font-size: 16px;
}
#wpContainer .inq_spt_btnList li a span {
  margin-right: 8px;
  width: 30px;
}
@media only screen and (max-width: 767px) {
  #wpContainer .inq_spt_btnList li a span {
    margin-bottom: 5px;
  }
}
#wpContainer .inq_spt_btnList li a span img {
  width: 100%;
  height: auto;
}
#wpContainer .inq_spt_btnList li a::after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: url(/common/img/sprite_ico01.png) 0 0 no-repeat;
  -webkit-background-size: 40px auto;
  background-size: 40px auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 15px;
  transition: all 0.3s ease;
}
@media only screen and (max-width: 767px) {
  #wpContainer .inq_spt_btnList li a::after {
    right: 1.73vw;
  }
}
#wpContainer .inq_spt_btnList li a:hover {
  background-color: #e9faf9;
  transition: all 0.5s 0s ease;
}
#wpContainer .inq_spt_btnList li a:hover::after {
  right: 5px;
}
@media only screen and (max-width: 767px) {
  #wpContainer .inq_spt_btnList li p {
    font-size: 1.3rem;
    text-align: left;
  }
}

.mt10 {
  margin-top: 10px;
}

.mt30 {
  margin-top: 30px;
}

.gpCautionList.style03 > li {
  font-size: 1.3rem;
}
.gpCautionList.style03 > li::before {
  color: #fff;
}

.gp-beveled-button-txt.check::before {
  content: "";
  background: #00A099;
  mask: url("/common/img/ico_mailForm.svg") no-repeat center center/contain;
  -webkit-mask: url("/common/img/ico_mailForm.svg") no-repeat center center/contain;
  width: 20px;
  height: 20px;
  display: block;
  margin-right: 10px;
}
.gp-beveled-button-txt.check:hover::before {
  background: #fff !important;
  mask: url("/common/img/ico_mailForm.svg") no-repeat center center/contain;
  -webkit-mask: url("/common/img/ico_mailForm.svg") no-repeat center center/contain;
}
.gp-beveled-button-txt.check.mypage::before {
  background: #00A099;
  mask: url("/common/img/ico_mypage.svg") no-repeat center center/contain;
  -webkit-mask: url("/common/img/ico_mypage.svg") no-repeat center center/contain;
}
.gp-beveled-button-txt.check.mypage:hover::before {
  background: #fff !important;
  mask: url("/common/img/ico_mypage.svg") no-repeat center center/contain;
  -webkit-mask: url("/common/img/ico_mypage.svg") no-repeat center center/contain;
}

@media only screen and (max-width: 767px) {
  .gpBeveledButton.check {
    margin: 0 auto;
    display: block !important;
  }
}

.check_tel {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.check_tel a {
  text-decoration: none;
  color: #333333;
  font-size: 2.8rem;
  font-weight: bold;
}
.check_tel i {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  background: url(/common/img/sprite_ico01.png) 0 -40px no-repeat;
  -webkit-background-size: 40px auto;
  background-size: 40px auto;
  margin-right: 5px;
}

#contents #wpContainer.check .gpArticle {
  padding: 0px 15px 80px 15px;
}
@media only screen and (max-width: 767px) {
  #contents #wpContainer.check .gpArticle {
    padding: 0px 15px 30px 15px;
  }
}

.head_mypage {
  margin-bottom: 0;
}
.head_mypage a {
  border: 2px solid #FFFFFF;
  border-radius: 50px;
  padding: 3px 15px;
  color: #fff;
  text-decoration: none;
  font-size: 1.3rem;
  font-weight: bold;
}

@media only screen and (max-width: 767px) {
  .gpFooterInquiry {
    margin-top: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .gpFooterInquiry h2 .ja {
    font-size: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .gpFooterInquiry .inquiry {
    width: 50%;
    padding-bottom: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .gpFooterInquiry .inquiry a {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
@media only screen and (max-width: 767px) {
  .gpFooterInquiry .inquiry a i {
    margin-right: 0;
    margin-bottom: 5px;
  }
}
@media only screen and (max-width: 767px) {
  .gpFooterInquiry .app {
    width: 50%;
    padding-bottom: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .gpFooterInquiry .app a {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
@media only screen and (max-width: 767px) {
  .gpFooterInquiry .app a i {
    margin-right: 0;
    margin-bottom: 5px;
  }
}

.cate_qa #sub.side_search {
  margin-bottom: 30px;
}
.cate_qa #sub .boxInner.style01 {
  padding: 10px !important;
  background-color: #b2dfda;
}
.cate_qa .titBasic01 {
  font-size: 2rem;
}
.cate_qa .boxForm01 > input[type=button], .cate_qa .boxForm01 > input[type=submit], .cate_qa .boxForm01 > input[type=reset] {
  width: 20%;
  font-size: 16px;
  padding: 13px;
}
.cate_qa .boxForm01 > input[type=text] {
  width: 80%;
  font-size: 16px;
}
.cate_qa input[type=text], .cate_qa input[type=password], .cate_qa textarea {
  padding: 13px;
}
.cate_qa .boxForm01 {
  margin-bottom: 5px;
}
.cate_qa .txtForm01 {
  font-size: 1.2rem;
}
.cate_qa input::placeholder {
  color: #838383;
  font-weight: 200;
  font-size: 1.4rem;
}
.cate_qa .titPanel01:before, .cate_qa .titPanel01::after {
  display: none;
}

@media only screen and (max-width: 767px) {
  .cate_qaFoot #btnPagetop {
    display: none;
  }
}
.cate_qaFoot .cateBtn {
  display: none;
  position: fixed;
  right: 0;
  bottom: 80px;
  z-index: 99999;
}
@media only screen and (max-width: 767px) {
  .cate_qaFoot .cateBtn {
    display: block;
  }
}
.cate_qaFoot .cateBtn a {
  background: #D8EAE8;
  border: solid 1px #00b1a9;
  padding: 5px 5px 5px 20px;
  color: #333;
  border-radius: 20px 0 0 20px;
  text-decoration: none;
  position: relative;
  vertical-align: middle;
  font-weight: bold;
  font-size: 1.2rem;
}
.cate_qaFoot .cateBtn a::before {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
  left: 10px;
  width: 4px;
  height: 4px;
  border-top: 2px solid #00A099;
  border-right: 2px solid #00A099;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.contCateKey {
  display: none;
}
@media only screen and (max-width: 767px) {
  .contCateKey {
    display: block;
  }
}
.contCateKey .keyTit {
  color: #00b1a9;
  text-align: center;
  margin-bottom: 5px;
}
.contCateKey .titPanel01 {
  border-bottom: 1px solid #CCCCCC !important;
}
.contCateKey .boxInner {
  background: #fcfcfc;
}

.u-anchorLink {
  padding-top: 80px;
  margin-top: -80px;
}

@media only screen and (max-width: 767px) {
  .u-anchorLink {
    padding-top: 60px;
    margin-top: -60px;
  }
}
/*
# バナースタイル
```
<div class="bannerArea">
  <dl class="bannerItem">
    <dt class="bannerTtl">タイトル</dt>
    <dd><a href="" target="_blank">
      <img src="../common/images/img.jpg" alt="altです" class="pc">
      <img src="../common/images/img_sp.jpg" alt="altです" class="sp">
    </a></dd>
  </dl>
</div>
```
*/
.bannerArea {
  background: #fff;
  padding: 10px 0 0;
  border-top: 2px solid #00b1a9;
}

.bannerArea .sp {
  display: none;
}

@media only screen and (max-width: 768px) {
  .bannerArea {
    padding: 10px 13% 0;
  }
  .bannerArea .pc {
    display: none;
  }
  .bannerArea .sp {
    display: block;
  }
}
.bannerArea .bannerTtl {
  text-align: center;
  margin-bottom: 10px;
}

.bannerArea img {
  width: 100%;
  height: auto;
}

.bannerArea a {
  position: relative;
  display: block;
}

.bannerArea a:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transition: opacity 0.3s ease;
  background: #fff;
  opacity: 0;
}

.bannerArea a:hover:before {
  transition: opacity 0.3s ease;
  opacity: 0.4;
}/*# sourceMappingURL=style.css.map */