@charset "utf-8";

/* 共通 */
/*body {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue","Mplus 1p", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}*/
.hide {
    text-indent:100%;
    white-space:nowrap;
    overflow:hidden;
}
.flex {
  box-sizing:border-box;
  display:flex;
}

/* #top */
body {
    min-height:100vh;
    width:100%;
    background:url(../img/bg_short.jpg) no-repeat fixed center/cover;
    margin:auto;
    box-sizing:border-box;
}
.out_wrapper {
    width:100%;
    max-width:980px;
    margin:auto;
    padding:20px;
    box-sizing:border-box;
}
.content_wrapper {
    width:100%;
    max-width:980px;
    margin:auto;
    box-sizing:border-box;
    margin:20px auto;
}
section {
    margin-bottom:20px;
    background-color:#fff;
    padding:0 20px 30px;
}
a {
    transition:0.4s;
}
a:hover {
    opacity:0.6;
}

/* header */
.header {
    width:100%;
    max-width:980px;
    margin:auto;
    height:0;
    padding-bottom:58.16%;
    background:url(../img/top.jpg) no-repeat center/cover;
    box-sizing:border-box;
    position:relative;
}
.header .scroll {
    display:block;
    position:absolute;
    bottom:10px;left:0;right:0;top:auto;
    margin:auto;
    width:4%;
    max-width:40px;
    height:60px;
}
.header .scroll01 {
    right:calc(100% / 2);
}
.header .scroll02 {
    left:calc(100% / 2);
}
/* sns */
.icon_fb {
    background:url(../img/icon_fb.png) no-repeat center/contain;
}
.icon_ig {
    background:url(../img/icon_ig.png) no-repeat center/contain;
}
.icon_yt {
    background:url(../img/icon_yt.png) no-repeat center/contain;
}


/* .con01 */
.con01_item,.con02_item {
    width:100%;
    max-width:450px;
    margin:0 auto 50px;
    justify-content:center;
    align-items:flex-start;
}
.con01_item .left,.con02_item .left {
    width:53%;
    max-width:200px;
    box-sizing:border-box;
    padding:10px;
}
.con01_item .right,.con02_item .right {
    width:47%;
    max-width:180px;
    padding:10px;
}
.con01_item .right figure,.con02_item .right figure {
    box-sizing:border-box;
    padding:10px;
    margin:50px auto 20px; 
}
.con01_item .tuya_moji02,.con02_item .hassui_moji02 {
    width:100%;
    max-width:160px;
    margin:0 auto 20px;
}
.con01_item .tuya_moji02 {
    background:url(../img/item_tuya_moji02.png) no-repeat center/contain;
    height:24px;
}
.con02_item .hassui_moji02 {
    background:url(../img/item_hassui_moji02.png) no-repeat center/contain;
  height:26px;
}
.con01_item .link_kounyu {
    display:block;
    width:100%;
    max-width:160px;
    height:24px;
    margin:auto;
}
.con02_item .link_kounyu {
    display:block;
    width:100%;
    max-width:160px;
    height:20px;
    margin:auto;
}
.con01_item .link_kounyu {
    background:url(../img/btn_tuya_kounyuu.png) no-repeat center/contain;
}
.con02_item .link_kounyu {
    background:url(../img/btn_hassui_kounyuu.png) no-repeat center/contain;
}
.con01_item_bottom,.con02_item_bottom {
    flex-wrap:wrap;
    justify-content:center;
    width:100%;
    max-width:300px;
    margin:auto;
}
.con01_item_bottom .left,.con02_item_bottom .left {
    width:32%;
    max-width:150px;
}
.con01_item_bottom .right,.con02_item_bottom .right {
    width:40%;
    max-width:150px;
}
.con01_item_bottom .right figure,.con02_item_bottom .right figure {
    margin:10px auto 10px;
    padding:0;
}
.con01_item_bottom .right .tuya_moji02,.con02_item_bottom .right .hassui_moji02 {
  margin:0 auto;
}
.con01_item_bottom .link_kounyu,.con02_item_bottom .link_kounyu {
  width:200px;
    height:24px;
}
.con02 {
  margin-bottom:0;
  border-bottom:1px solid #b9b9b9;
}


/* h3 */
h3 {
    font-size:22px;
    width:100%;
    text-align:center;
    position:relative;
    margin:auto;
    margin-bottom:25px;
    font-weight:bold;
}
h3::before {
    position: absolute;
    bottom: -5px;top:auto;
    left:0;right:0;
    margin:auto;
    width: 2.8em;
    height: 2px;
    content: '';
}
.con01 h3 {
    color:#000;
}
.con01 h3::before {
    background:#000;
}
.con02 h3 {
    color:#14126f;
}
.con02 h3::before {
    background:#14126f;
}
.tokutyo_moji {
    height:25px;
    margin-bottom:25px;
}
.con01 .tokutyo_moji {
    background:url(../img/moji_tuya.png) no-repeat center/contain;
}
.con02 .tokutyo_moji {
    background:url(../img/moji_hassui.png) no-repeat center/contain;
}

/* .tokutyo */
.con01_tokutyo ul,.con02_tokutyo ul,.con01_youto ul,.con02_youto ul {
    max-width:600px;
    margin:0 auto 30px;
}
.con01_tokutyo li,.con02_tokutyo li,.con01_youto li,.con02_youto li {
    font-family: a-otf-ryumin-pr6n, serif;
    font-weight:bold;
    line-height:1.6;
    margin-bottom:10px;
    position:relative;
    padding-left:10px;
    font-size:14px;
}
.con01_tokutyo li::before,.con02_tokutyo li::before,.con01_youto li::before,.con02_youto li::before {
    font-size:12px;
    content:'●';
    position:absolute;
    left:-10px;
    vertical-align: middle;
    padding-top:3px;
}
.tokutyo_img {
    width:100%;
    max-width:600px;
    margin:0 auto 100px;
}
.con01 .tokutyo_img p {
    font-weight:bold;
    margin:5px 0 0 10px;;
    font-size:20px;
}
.con02 .tokutyo_img p,.con01 .youto_img p,.con02 .youto_img p {
    font-weight:bold;
    text-align:center;
    margin-bottom:10px;
    font-size:18px;
    color:#14126f;
}
.con01 .youto_img p {
    color:#000;
}

/* .youto */
.youto_img,.youto_icon {
    width:100%;
    max-width:600px;
    margin:auto;
}
.youto_img figure {
    margin:0 10px 15px 0;
}
.youto_img figure:last-child {
    margin-right:0;
}
.youto_icon figure {
    margin:0 10px 100px 0;
}
.youto_icon figure:last-child {
    margin-right:0;
}

/* IE用 */
.con01 .tokutyo_img img {
    width:100%;
    max-width:300px;
}
.con02 .tokutyo_img img {
    width:100%;
    max-width:210px;
}
.youto_img figure img {
    width:100%;
    max-width:193px;
}
.youto_icon figure img {
    width:100%;
    max-width:142px;
}

/* shiyou */
.con01_shiyou,.con02_shiyou {
    margin:0 auto 30px;
}
.tuya_table,.hassui_table {
    border-collapse:collapse;
    margin-bottom:50px;
    width:100%;
    max-width:600px;
    margin:auto;
}
.tuya_table {
    background:#dcdddd;
}
.hassui_table {
    background:#e6f1f8;
}
.bg_gray {
    background:#b5b5b6;
}
.bg_blue {
    background:#a1d8f1;
}
th,td {
    padding:10px;
    box-sizing:border-box;
    border:1px solid #000;
    font-size:18px;
    line-height:1.0;
}
th {
    text-align:center;
}
td .flex {
    justify-content:center;
    flex-wrap:wrap;
}
.table_center,.table_left {
    width:100%;
}
.table_center {
    text-align:center;
}
.m_b_5 {
    margin-bottom:5px;
}
.m_2 {
    margin:0 2px;
}
.sp_off th:nth-of-type(1) {
    width:17%;
}
.sp_off th:nth-of-type(2) {
    width:30%;
}
.sp_off th:nth-of-type(3) {
    width:33%;
}
.sp_off th:nth-of-type(4) {
    width:20%;
}
.f_b {
    font-weight:bold;
    letter-spacing:2px;
    font-size:1.2em;
}
.f_01 {
    font-size:0.6em;
}
.f_02 {
    font-size:0.8em;
    font-weight:bold;
}


/* .footer */
.footer {
  text-align:center;
    background:#fff;
    padding:20px 0 5px;
}
.nho_link {
    display:block;
    width:100%;
    max-width:350px;
    height:65px;
    margin:20px auto;
    background:url(../img/icon_online2.png) no-repeat center/contain;
}
.footer .paintw a {
  margin:0 auto 30px;
  display:block;
  width:100%;
  max-width:180px;
}
.footer ul {
  justify-content:center;
  align-items:center;
  margin-bottom:30px;
}
.footer .flex a {
  display:block;
  box-sizing:border-box;
  width:25px;
  height:25px;
  border-radius:3px;
  transition:0.3s;
}
.footer a:hover {
  opacity:0.3;
}
.footer li:nth-child(3) a {
  background:url(../img/icon_fb.png) no-repeat center/contain;
}
.footer li:nth-child(2) a {
  margin-right:30px;
  background:url(../img/icon_ig.png) no-repeat center/contain;
}
.footer li:nth-child(1) a {
  margin-right:30px;
  background:url(../img/icon_yt.png) no-repeat center/contain;
}
.footer .last_text {
  font-size:13px;
  margin-bottom:10px;
}

/* topへ */
#page_top{
  width: 60px;
  height: 60px;
  position: fixed;
  right: 5px;
  bottom: 10px;
  opacity: 0.6;
  z-index:900;
}
#page_top a{
  position: relative;
  display: block;
  width: 60px;
  height: 60px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #000;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
/*#page_top a::after{
  content: '';
  font-size: 13px;
  position: absolute;
  top: 45px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
  color: #000;
}*/

.sp_on {
    display:none;
}

/* サイズ別設定 */
@media screen and (max-width: 850px) {
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 574px) {
}
@media screen and (max-width: 500px) {
}
@media screen and (max-width: 420px) {
  .sp_on {
    display:block;
  }
  .sp_off {
    display:none;
  }
    .flex {
        display:block;
    }
    .con01_item.flex,.con02_item.flex,.tuya_table .flex,.hassui_table .flex,.footer .flex {
        display:flex;
    }
    .con01_item .right figure, .con02_item .right figure,.con01_item .tuya_moji02, .con02_item .hassui_moji02 {
        margin:0 auto 10px;
    }
    .tokutyo_img {
        margin-bottom:50px;
    }
    .tokutyo_img figure {
        margin-bottom:20px;
    }
    .youto_icon.flex {
        display:flex;
        flex-wrap:wrap;
        margin-bottom:50px;
    }
    .youto_icon figure {
        width:50%;
        box-sizing:border-box;
        padding:5px;
        margin:0;
    }
    .tuya_table.sp_on th,.hassui_table.sp_on th {
        width:40%;
    }
    .footer {
       padding:20px; 
    }
    
    .youto_img figure {
        margin:0 0 15px 0;
    }
    
    /* IE用 */
.con01 .tokutyo_img img,.con02 .tokutyo_img img,.youto_img figure img,.youto_icon figure img {
    max-width:100%;
}
    
}