/* 4vwがデフォルトフォントサイズ */

/* 変数の定義 */
:root {
    --main-color: #333;
    --main-p-size: 3vw;
  }

body{
    font-family: "ヒラギノ角ゴシック", Hiragino Sans, Meiryo, sans-serif;
}

img{
    image-rendering: -webkit-optimize-contrast;
}

h2{
    font-size: 8vw;
}
h4{
    font-size: 4vw;
}

section{
    margin-bottom: 8vw;
}

.wrap{
    margin-top: 64px; /* ヘッダー分の差 */
    color: var(--main-color);

    padding-bottom: 64px;
}

/* header関連 */
/* header関連 */

header{
    position: fixed;
    top: 0;

    width: 100%;
    padding: 10px 0;
    background: white;
    box-shadow: 0px 3px 5px 0px rgba(132, 132, 132, 0.1);

    z-index: 10000;
}

.logo{
    position: relative;

    display: flex;
    justify-content: center;

    width: auto;
    height: auto;
}

.index_Link{
    position: absolute;
    display: block;

    width: 30%;
    height: 100%;
}

.burger_menu{
    position: absolute;
    top: 7px;
    right: 7px;

    width: 50px;
    height: 50px;

    border-radius: 20%;
    
    background: var(--main-color);
    transform: rotate(0turn);

    transition: 0.3s linear 0.1s;
}
.burger_menu:hover{
    transform: rotate(0.5turn);
    background: red;
}

/* header関連 */
/* header関連 */

/* Time関連 */
/* Time関連 */

.index_Time{
    position: absolute;
    top: 15%;
    left: 11.75%;

    -ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;

    color: var(--main-color);

    font-size: 4.5vw;
}

/* Time関連 */
/* Time関連 */

/* MainVisual関連 */
/* MainVisual関連 */

.index_MainVisual{
    width: 70%;

    padding-top: 0;
    margin-left: auto;
}

/* MainVisual関連 */
/* MainVisual関連 */

/* News関連 */
/* News関連 */

.index_News{
    width: 90%;

    margin: 0 auto;
    margin-top: 5vw;
}

.index_News > .index_News_wrap{
    display: flex;
    align-items: center;

    font-size: 3vw;

    margin-bottom: 10px;
}

.index_News_genre{
    color: white;
    background: var(--main-color);

    font-size: 3vw;
    letter-spacing: 0.2vw;

    padding: 4px 8px;
    margin-left: 10px;
}

.index_News > p{
    font-size: 3.3vw;
}

/* News関連 */
/* News関連 */

/* About関連 */
/* About関連 */

.index_About{
    position: relative;

    width: 90%;

    margin: 0 auto;
    margin-top: 15vw;
}

.index_mini_title{
    margin-bottom: 5vw;
}

.index_About_me{
    display: flex;

    margin-left: -27.5%;
}

.index_About_me > div > h4{
    margin-bottom: 5vw;

    font-size: 4vw;
}

.index_About_me > div > h4 > span{
    font-size: 10vw;

    background:linear-gradient(transparent 70%, lightgray 0%);
}

.index_About_me > div > p{
    width: 100%;
    font-size: var(--main-p-size);

    margin-left: auto;
    margin-bottom: 5vw;
}

.index_About_contents{
    width: 100%;
    height: 25%;
    
    background-color: var(--main-color);
}

.index_MoreBtn{
    position: absolute;
    bottom: 0;
    right: 0;

    background-color: var(--main-color);

    border: var(--main-color) 2px solid;
    border-radius: 1000px;
    padding: 1.5vw 3vw;

    font-size: var(--main-p-size);
    letter-spacing: 0.5vw;

    color: white;
}

/* About関連 */
/* About関連 */


/* Create関連 */
/* Create関連 */

.index_Create{
    position: relative;

    width: 100%;

    margin: 0 auto;
    margin-top: 15vw;
}

.index_Create > .index_Create_wrap{
    width: 90%;

    margin: 0 auto;

    margin-bottom: 5vw;
}

.index_mini_title{
    margin-bottom: 5vw;
}

.index_mini_title > h2{
    display: flex;
    align-items: center;
}

.index_mini_title > h2 > img{
    margin-left: 2vw;
}

.index_Create_swiper{
    width: 100%;

    margin-bottom: 5vw;
}

.index_Create_swiper > div > .swiper-slide{
    border: #333 solid 1px;

    background-color: var(--main-color);

    width: 80%;
    height: 200px;
}

.index_Create_Contents{
    display: flex;
    justify-content: space-between;

    width: 90%;

    margin: 0 auto;

    font-size: var(--main-p-size);
    text-align: center;
}

.index_Create_Contents_Items_Img{
    width: 75px;
    height: 50px;

    background: #333;

    margin-bottom: 2vw;
}

/* Create関連 */
/* Create関連 */

/* Magagine関連 */
/* Magagine関連 */

.index_Magazine{
    position: relative;

    width: 90%;

    margin: 0 auto;
    margin-top: 15vw;
}

.index_Magazine > .index_Magazine_wrap{
    width: 100%;

    margin: 0 auto;

    margin-bottom: 5vw;
}

.index_mini_title{
    margin-bottom: 5vw;
}

.index_mini_title > h2{
    display: flex;
    align-items: center;
}

.index_Magazine_Main{
    position: relative;

    width: 85%;
    /* height: 450px; */

    /* background: #333; */
}

.index_Magazine_attention{
    position: absolute;
    bottom: 13vw;
    right: -5vw;

    width: 150px;
    height: 100px;

    background: white;
    box-shadow: 0px 3px 5px 0px rgba(132, 132, 132, 0.3);

    display: flex;
    justify-content: center;
    align-items: center;
}