@charset "UTF-8";

html{
    font-size:62.5%;
}

.section{
    min-width:1000px;
    color:#333;
    font-family:Midashi Go MB31,游ゴシック Medium,YuGothic,YuGothicM,Hiragino Kaku Gothic ProN,メイリオ,Meiryo,sans-serif;
    line-height:1.5;
}
.section a{
    color:#000;
    text-decoration:none;
    transition:.16s;
    vertical-align:baseline;
    background:transparent;
}
.section img{
    max-width:100%;
    vertical-align:top
}

.header{
    position:relative;
    height:120px;
    background-image:url(/store/techo/ja/magazine/2019/yokoku/img/article/bg_illust@2x.png);
    background-size:cover;
    background-position:50%;
}
.header:before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color:hsla(0,0%,92%,.95)
}
.header__title{
    width:284px;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    text-align:center;
}
.header__title img{
    width:auto
}
.header__banner{
    right:calc(50% - 500px);
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:1
}
.header__banner__sp{
    left:0;
    position:absolute;
    bottom:-28px;
    background:#000050!important;
    width:100%;
    height:28px;
}
.header__banner__sp img{
    display:block;
    width:320px;
    margin:0 auto;
}
.header .btn-lang{
    left:100px;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:1;
    background-color:#fff;
    border-radius:5px;
    width:80px;
    height:22px;
    text-align:center
}
.header .btn-lang a{
    display:block;
    color:#1080ba;
    font-size:1.3rem;
    line-height:23px;
    font-family:Roboto Condensed,sans-serif
}
.header .btn-lang--dark{
    background-color:#000054
}
.header .btn-lang--dark a{
    color:#fff
}

.content-header{
    max-width: 960px;
    margin: 0 auto;
    padding: 30px 0 20px;
}
.content-header__date{
    display:-ms-flexbox;
    display:flex;
    -ms-flex-align:center;
    align-items:center
}
.content-header__date .date{
    width:100px;
    height:42px;
    line-height:42px;
    color:#fff;
    background-color:#000;
    text-align:center;
    font-family:Roboto Condensed,sans-serif;
    font-style:italic;
    font-weight:700;
    font-size:2.2rem
}
.content-header__date .date small{
    font-size:1.2rem;
    margin-left:.4em
}
.content-header__date .suffix{
    margin-left:10px;
    font-size:1.6rem;
    transform:rotate(.05deg)
}
.content-header__date .suffix small{
    font-size:1.3rem
}
.content-header__txt-title{
    font-size:1.6rem;
    line-height:1.85;
    text-decoration:underline;
    margin-left:20px
}
.content-header__txt-title small{
    font-size:1.2rem
}

.guide{
    padding:30px 0;
    background-color:#000050
}
.guide ul{
    display:-ms-flexbox;
    display:flex;
    -ms-flex-pack:center;
    justify-content:center
}
.guide ul li{
    margin:0 15px;
    font-size:1.5rem;
    font-weight:700;
    text-align:center
}
.guide ul a{
    display:-ms-flexbox;
    display:flex;
    -ms-flex-pack:center;
    justify-content:center;
    -ms-flex-align:center;
    align-items:center;
    color:#fff;
    width:310px;
    height:80px;
    border:4px solid #fff;
    border-radius:10px;
    transform:rotate(.05deg)
}
.footer{
  background:#fff;
}
.footer-nav{
    position:relative;
    padding-bottom:140px;
    overflow:hidden;
    padding-top:70px;
    background-image:url(/store/techo/ja/magazine/2019/yokoku/img/bg_illust@2x.png);
    background-size:cover;
    background-position:50%
}
.footer-nav:before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color:hsla(0,0%,92%,.95)
}
.footer-nav:after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    display:block;
    width:1482px;
    height:120px;
    margin:50px auto -10px;
    transform:translateX(-50%);
    background-image:url(/store/techo/ja/magazine/2019/yokoku/img/article/people@2x.png);
    background-size:100% auto;
    background-repeat:no-repeat;
    background-position:50%;
    z-index:2
}
.footer-nav .inner{
    position:relative;
    z-index:1;
    max-width:400px;
    margin:0 auto;
    line-height:1;
}
.footer-nav__share{
    text-align:center
}
.footer-nav__share h3{
    font-size:1.6rem;
    transform:rotate(.05deg)
}
.footer-nav__share ul{
    display:-ms-flexbox;
    display:flex;
    -ms-flex-pack:justify;
    justify-content:space-between;
    margin-top:20px
}
.footer-nav__links ul{
    display:-ms-flexbox;
    display:flex;
    -ms-flex-pack:center;
    justify-content:center;
    margin-top:30px
}
.footer-nav__links ul li{
    margin:0 15px
}
.footer-nav__banner{
    margin-top:80px
}
.footer-nav__text-link{
    margin-top:30px;
    text-align:center
}
.footer-copyright{
    position:relative;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-pack:center;
    justify-content:center;
    -ms-flex-align:center;
    align-items:center;
    height:80px;
    background-color:#000
}
.footer-copyright__hobonichi-link{
    position:absolute;
    right:100px;
    font-size:1rem
}
.footer-copyright__hobonichi-link a{
    color:#fff
}

.device-pc .section a[href]:hover{
    opacity:.5
}
.device-pc .section .is-pc-disabled,.sp{
    display:none!important
}
.device-pc .content-header{
    display:-ms-flexbox;
    display:flex;
    -ms-flex-align:start;
    align-items:flex-start;
}

.device-sp .section{
    min-width:100%
}
.device-sp .section .is-sp-disabled{
    display:none!important
}
.device-sp .header{
    background-size:100% auto;
    background-repeat:repeat-y;
    height:60px;
    margin-bottom:28px;
}
.device-sp .header__title{
    width:80%;
    min-width:0;
    margin-top:0
}
.device-sp .header__title img{
    width:140px;
    margin: 0 auto;
}
.device-sp .header .btn-lang{
    left:auto;
    right:5%;
    width:60px
}
.device-sp .header .btn-lang a{
    font-size:1.2rem
}
.device-sp .content-header{
    width: 90%;
}
.device-sp .content-header__date .date{
    width:80px;
    height:34px;
    line-height:34px
}
.device-sp .content-header__txt-title{
    margin-top:10px;
    margin-left:0
}
.device-sp .guide ul{
    display:block;
    padding-left:5%;
    padding-right:5%
}
.device-sp .guide ul li{
    margin:0
}
.device-sp .guide ul li+li{
    margin-top:20px
}
.device-sp .guide ul li a{
    width:100%;
    height:auto;
    margin:0;
    padding:5px 0;
    border-width:2px;
    border-radius:5px
}
.device-sp .footer-nav{
    padding:30px 10% 70px;
    padding-bottom:30%;
}
.device-sp .footer-nav:after{
    width:100%;
    height:120px;
    margin-top:0;
    background-image:url(/store/techo/ja/magazine/2019/yokoku/img/article/people_sp@2x.png);
    background-repeat:no-repeat;
    background-position:bottom
}
.device-sp .footer-nav__share ul li{
    width:50px
}
.device-sp .footer-nav__links ul{
    margin-top:15px
}
.device-sp .footer-nav__banner{
    margin-top:30px
}
.device-sp .footer-copyright{
    display:block;
    height:auto;
    padding:25px 0;
    text-align:center
}
.device-sp .footer-copyright img{
    width:70%;
    margin: 0 auto;
}
.device-sp .footer-copyright__hobonichi-link{
    position:static;
    margin-bottom:40px;
    font-size:1.2rem
}
.device-sp .footer-copyright__hobonichi-link a{
    text-decoration:underline
}

#page{
  padding: 0;
}