@charset "utf-8";

/*
この課題練習はあくまで制作の一例です。
記述の方法にも色々とあるのだと知っていただければと思います。
必ずこの記述でなければならないというのはありませんので
色々なテキストや参考書籍・参考動画と同じように参考例の一例として
見ていただければと思います。

現在この課題の解説を作成中です。遅れてしまいすみません。
練習課題2ハンバーガーメニューのpdfのように図にしてわかりやすくしたいと思っております。

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

ここからがbase

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

/*
全ての要素に指定する
*/
* {
    box-sizing: border-box;
    /*
    paddingとborderがwidthとheightの中に含まれるようになります。
    */
}

/*
1番外側の囲んでいるクラスに対しての指定余白対策
*/
.out-wrapper {
    overflow: hidden;
}

/*
floatの解除
クリアフィックスというfloat解除の
cssテクニックの一つです
*/
.clearfix::after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;/*非表示*/
    height: 0;
}


.main-wrapper {
    padding-left:5.3333%;/* 20px/375px*/
    padding-right:5.3333%;
}

.txt_center {
    text-align: center;
}



/*--------------------------------------------------

スマホの時

--------------------------------------------------*/
@media screen and (max-width:519px){
    .s-phone-none {
        display: none;/*スマホの時は非表示*/
    }

    .full-width {
        margin-left:-5.3333vw;
        margin-right:-5.3333vw;
        padding-left:5.3333vw;
        padding-right:5.3333vw;
        /*
        全幅設定
        ネガティブマージンで広げて
        paddingで狭める
        */
    }


}

/*--------------------------------------------------

タブレットの時
xdではスマホとパソコンのカンプを作成しています
例としてタブレットのメディアクエリーを下記に載せています。

--------------------------------------------------*/
@media screen and (min-width:520px) and (max-width:959px){
    .tablet-none {
        display: none;/*タブレットの時は非表示*/
    }
    .full-width {
        margin-left:-5.3333vw;
        margin-right:-5.3333vw;
        padding-left:5.3333vw;
        padding-right:5.3333vw;
        /*
        全幅設定
        ネガティブマージンで広げて
        paddingで狭める
        */
    }

}

/*--------------------------------------------------

パソコンの時

--------------------------------------------------*/
@media screen and (min-width:960px){
    .pc-none {
        display: none;/*パソコンの時は非表示*/
    }
    .wrapper {
        max-width: 1280px;
        margin-left:auto;
        margin-right: auto;
    }
    .full-width {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
    .main-wrapper {
        padding-left:0;
        padding-right:0;
    }
    .wrapper .inner {
        padding-left:3.125%;/* 40px/1280=1200pxになる*/
        padding-right:3.125%;
    }
}

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

ここまでがbase

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

ここからがelements(要素)

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

h1,h2,h3{
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.4;
    margin-bottom: .5rem;
}

p {
    text-align: justify;
    /*均等割付け
    文字間を自動で調整し、テキストの改行位置が
    ボックスの両端ぴったりに揃うようになります。
    */
}

img {
    vertical-align: bottom;
    /*推奨img要素の下に出来る隙間の回避
    img要素をvertical-alignでbaseline以外に指定する
    img要素はインライン要素のため、通常ではvertical-alignがbaselineに指定
    されています。フォントのベースラインと画像の下部が揃ってしまい隙間ができる。
    vertical-alignをbottomに指定すると、隙間がなくなります。
    */
}

a {
    text-decoration: none;/*テキスト装飾なし*/
    color: #333;
}

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

ここまでがelements(要素)

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

ここからがbody header表示設定

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

/*
body header
*/

body {
    background-color: #fff;
    color: #333;/* #000000よりも#333333が多くのサイトで使われています*/
    line-height: 1.6;/* 文字の行間の高さ 1.5~2.0がベスト*/
    letter-spacing: 0.1rem;/* 水平方向の字間のスペース 文字の高さの1/10の大きさの字間 0.05rem~0.1remがおすすめ*/
    font-size: 16px;/* 1remの基準になります。1rem=16px*/
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
    "Yu Gothic",YuGothic,"ヒラギノ角ゴ ProN W3",Hiragino Kaku Gothic ProN,Arial,"メイリオ",Meiryo, sans-serif;
}

.main-header {
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background:#fff;
    position: relative;
}

.global-navi {
    display: flex;
    width: 100%;
    height: 80px;
    position: relative;
}
.logo {
    position: relative;
    left: 20px;
    margin-top: 30px;
    font-weight: bold;
}

/*
ハンバーガーメニュー
*/

.hb-menu {
    width: 50px;
    height: 40px;
    position: absolute;
    top: 0;
    right: 0;
    position: fixed;
    z-index: 100;
}
.hb-menu a{
    display: block;
    height: 100%;
}
.hb-menu a::before,
.hb-menu a::after{
    content: "";
    display: block;
    width: 50px;
    height: 10px;
    background-color: #333;
    position: absolute;
    top: 10px;
    margin-top: 10px;
    right: 20px;
    transition: .3s;
}
.hb-menu a::after{
    top: 10px;
    margin-top: 30px;
}
.hb-menu a:hover::before,
.hb-menu a:hover::after{
    transform: rotate(45deg);
    top: 20px;
    margin-top: 10px;
}
.hb-menu a:hover::after{
    transform: rotate(-45deg);
    top: 20px;
    margin-top: 10px;
}

/*--------------------------------------------------

ここからパソコンの時

--------------------------------------------------*/
@media screen and (min-width:960px){
    .logo {
        width: 20%;
    }
    .global-navi-menu{
        width: 80%;
    }
    .global-navi-menu ul{
        width: 100%;
        margin-top: 30px;
        text-align: right;
    }
    .global-navi-menu ul li{
        display: inline-block;/*横並び*/
        margin-left: 8.3333%;
    }
}





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

ここまでがbody header表示設定

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

ここからがmain-visual表示設定

==================================================*/
.main-visual {
    background-color: #ddd;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vw;
    /*
    heightも100vwにして正方形にしています
    */
}
.main-visual * {
    text-align: center;
}
.main-visual h1 {
    font-size: 2rem;
    font-weight: bold;
    width: 100%;
}

/*--------------------------------------------------

ここからパソコンの時

--------------------------------------------------*/
@media screen and (min-width:960px){
    .main-visual {
        height: 400px;
    }
}
/*==================================================

ここまでがmain-visual表示設定

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

ここからがmain表示設定

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


.main-wrapper .wrapper {
    margin-top: 2rem;
    /*
    上の余白
    */
}

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

ここまでがmain表示設定

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

ここからがabout表示設定

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

.about > section h2,
.about > section >p
{
    text-align: center;
}
.about > section h2 {
    font-size: 1.75rem;
    font-weight: bold;
}
.about > section p {
    margin-top: 1rem;
}
/*
.about-container
*/
.about-item {
    margin-top: 2rem;
    width: 100%;
}
.about-item figure{
    width: 100%;
}
.about-item figure img{
    width: 100%;
    height: auto;
}
.about-item h3 {
    margin-top: 1rem;
    font-size: 1.25rem;
    font-weight: bold;
}
.about-item p {
    letter-spacing: 0;
    text-align: left;
}

/*--------------------------------------------------

パソコンの時

--------------------------------------------------*/
@media screen and (min-width:960px){
    .about.wrapper {
        margin-top: 2.5rem;
        width: 100%;
    }
    .about .inner {
        width: 100%;
    }
    /*
    .about-container
    */
    .about-container {
        width: 100%;
    }
    .about-item {
        margin-top: 1.5625rem;/* 25px */
        width:31.1111%;/* 373.3333px/1200*/
        margin-right: 3.3333%;/* 40px/1200*/
        float: left;
    }
    .about-item:nth-last-of-type(1){
        margin-right: 0;
    }
}


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

ここまでがabout表示設定

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

ここからがtheme表示設定

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

.theme {
    background-color:#efefef;
    padding-bottom: 2rem;
}

.theme > section h2,
.theme >  section > p {
    text-align: center;
}
.theme >  section h2 {
    font-size: 1.75rem;
    font-weight: bold;
    padding-top: 2rem;
}

.theme >  section > p {
    margin-top: 1rem;
}
.theme-container {
    width: 100%;
}
.theme-item {
    width: 100%;
    margin-top:2rem;
}

.theme-item-img {
    width: 44.1791%;
    margin-right: 5.97014%;
    float: left;
}
.theme-item-img img{
    width: 100%;
}

.theme-item-text h3{
    width:49.85074%;
    float: left;
    font-weight: bold;
}
.theme-item-text p {
    letter-spacing: 0;
}

/*--------------------------------------------------

パソコンの時

--------------------------------------------------*/
@media screen and (min-width:960px){

    .theme-item-text h3{
        float: none;
    }

    .theme-item-text h3{
        float: none;
    }
    .theme-item {
        width: 46.6666%;
        margin-top:2rem;
        float: left;
    }

    .theme-item{
        margin-right: 3.3333%;
    }
    .theme-item-img {
        width: 39.28571%;
        float: left;
        margin-right: 7.14285%;
    }

    .theme-item-text{
        width: 53.57142%;
        float: left;
    }
}

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

ここまでがtheme表示設定

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

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

ここからがnews表示設定

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

.news > section > h2 {
    text-align: center;
    font-size: 1.75rem;
    font-weight: bold;
}
.news-container {
    margin-top: 2rem;
}
.news-container-item dt {
    display: inline-block;
    background: #000;
    color: #fff;
    padding: 0 5px;
    border-radius: 5px;
    margin-top: 1rem;
}
.news-container-item dd{
    margin-top: .5rem;
    letter-spacing: 0;
}


/*--------------------------------------------------

パソコンの時

--------------------------------------------------*/
@media screen and (min-width:960px){
    .news {
        margin-top: 2.5rem;/* 40px */
    }
    .news-container{
        margin-top: 3.75rem;/* 60px */
    }
    .news-container-item {
        width: 100%;
        margin-bottom: 1rem;
    }
    .news-container-item dt {
        margin-right: 1.3333%;/* 14px */
        float: left;
        width: 6.6666%;/* 14px */
        font-size: .875rem;/* 14px */
        padding: 0 8px;

    }
    .news-container-item dd{
        padding-top: 1rem;
        display: block;
        width: 92%;
        margin-left: 7.9999%;/* 90px */
        font-size: .875rem;/* 14px */
        border-bottom: solid 2px #333;
    }
}

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

ここまでがnews表示設定

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

ここからがfooter表示設定

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

.main-footer {
    background-color: #efefef;
    margin-top: 2rem;
    padding-top: 2rem;
}

.main-footer-container div{
    margin-top: 1rem;
}
.main-footer-container div dt{
    font-size: 1.25rem;
    font-weight: bold;
    letter-spacing: 0;
}
.main-footer-container div dd{
    margin-top: 1rem;
}

small {
    display: block;
    font-size: .75rem;
    text-align: center;
    margin-top: 1rem;
    padding-bottom: 1rem;

}
@media screen and (min-width:960px){
    
    .main-footer {
        margin-top: 2.375rem;
    }
    .main-footer-container {
        width: 100%;
    }
    .main-footer-container div {
        width: 22.5%;
        margin-right: 3.3333%;
        float: left;
    }
    .main-footer-container  div:nth-last-of-type(1){
        margin-right: 0;
    }
}

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

ここまでがfooter表示設定

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