/****** Reset ******/
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: baseline;
    background: transparent;
}

body {
    line-height: 1.65;
    font-family: 'Red Hat Display', '游ゴシック体', 'Yu Gothic', 'Hiragino Kaku Gothic Pro',
        'ヒラギノ角ゴシック Pro', 'Meiryo', 'メイリオ', 'Osaka', 'MS PGothic', 'ＭＳ Ｐゴシック',
        sans-serif;
    font-feature-settings: "palt";
    font-weight: bold;
    color: #1d1d1f;
    background: #fff;
}

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

nav ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: none;
}

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: middle;
    background: transparent;
    text-decoration: none;
    color: #f5f5f7;
}
a:hover button {
    transition: 0.2s;
    transition-timing-function: linear;
    opacity: 0.8;
}

a:active, a:hover, button {
    outline: 0;
}

ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none;
}

mark {
    background-color: #ff9;
    color: #000;
    font-style: italic;
}

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 #ccc;
    margin: 1em 0;
    padding: 0;
}

input, select {
    vertical-align: middle;
}

img {
    vertical-align: middle;
    border: 0;
}

ul, ol {
    list-style: none;
}



/****** Fluid-img ******/

img {
    max-width: 100%;
    height: auto;
    border-radius: 40px;
}

/* 禁則処理 */
p, li, dt, dd, th, td, pre {
    -ms-line-break: strict;
    line-break: strict;
    -ms-word-break: break-strict;
    word-break: break-strict;
}


/****** Fluid-img ******/

img {
    max-width: 100%;
    height: auto;
    border-radius: 40px;
}


/****** Animation ******/

@keyframes AnimationName {
    0% {
        background-position: 51% 0%
    }
    50% {
        background-position: 50% 100%
    }
    100% {
        background-position: 51% 0%
    }
}

.grad-bg01 {
    background: linear-gradient(10deg, #1656A2, #1cb5e0);
    background-size: 400% 400%;

    -webkit-animation: AnimationName 30s ease infinite;
    -moz-animation: AnimationName 30s ease infinite;
    animation: AnimationName 30s ease infinite;
}

.grad-bg02 {
    background: linear-gradient(80deg, #1656A2, #1cb5e0);
    background-size: 400% 400%;

    -webkit-animation: AnimationName 30s ease infinite;
    -moz-animation: AnimationName 30s ease infinite;
    animation: AnimationName 30s ease infinite;
}

.grad-bg03 {
    background: linear-gradient(120deg, #1656A2, #1cb5e0);
    background-size: 400% 400%;

    -webkit-animation: AnimationName 30s ease infinite;
    -moz-animation: AnimationName 30s ease infinite;
    animation: AnimationName 30s ease infinite;
}

.grad-text01 {
    background: linear-gradient(20deg, #1656A2, #1cb5e0);
    background-size: 400% 400%;

    -webkit-animation: AnimationName 30s ease infinite;
    -moz-animation: AnimationName 30s ease infinite;
    animation: AnimationName 30s ease infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.grad-text02 {
    background: linear-gradient(160deg, #1656A2, #1cb5e0);
    background-size: 400% 400%;

    -webkit-animation: AnimationName 30s ease infinite;
    -moz-animation: AnimationName 30s ease infinite;
    animation: AnimationName 30s ease infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.grad-text03 {
    background: linear-gradient(200deg, #1656A2, #1cb5e0);
    background-size: 400% 400%;

    -webkit-animation: AnimationName 30s ease infinite;
    -moz-animation: AnimationName 30s ease infinite;
    animation: AnimationName 30s ease infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.grad-text04 {
    background: linear-gradient(20deg, #1656A2, #1cb5e0);
    background-size: 400% 400%;

    -webkit-animation: AnimationName 30s ease infinite;
    -moz-animation: AnimationName 30s ease infinite;
    animation: AnimationName 30s ease infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/****** Common ******/

.text-grey {
    color: #757578;
}

.letterspace06 {
    letter-spacing: 0.06em;
}


.opacity7 {
    opacity: 0.7;
}


/****** Html ******/

.wrapper {
    margin: 0 auto;
    height: 100%;
    overflow: hidden;
}


/****** Heading ******/

h2 {
    font-size: 72px;
    line-height: 84px;
    margin-bottom: 24px;
}

h3 {
    font-size: 40px;
    line-height: 48px;
}


/****** Header ******/

header {
    margin: 24px 0 64px;
}
header img {
    border-radius: 0px;
}

.inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 2em;
    text-align: left;
}

header .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-buttons button {
    width: 160px;
    height: 56px;
    padding: 16px;
    color: #f5f5f7;
    font-size: 12px;
    border: 0;
    border-radius: 28px;
    cursor: pointer;
}


/****** Hero ******/

.hero {
    text-align: center;
    margin-bottom: 64px;
}

.hero p {
    font-size: 24px;
    margin-bottom: 24px;
}

.hero h3 {
    font-size: 18px;
    line-height: 22px;
}

.hero h4 {
    font-size: 40px;
    line-height: 48px;
	margin-bottom: 40px;
}

.button_main button {
    width: 200px;
    height: 72px;
    margin-bottom: 260px;
    padding: 16px;
    color: #f5f5f7;
    font-size: 16px;
    border: 0;
    border-radius: 36px;
    cursor: pointer;
}


/****** section01 ******/

.section01 {
    position: relative;
    width: 100%;
    padding: 220px 0 168px;
    background: #000;
}

.img-main {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translate(-50%, -50%);
}

.section01 h2 {
    font-size: 48px;
    line-height: 58px;
    text-align: left;
    color: #f5f5f7;
}

.section01 p {
    color: #757578;
    font-size: 20px;
    text-align: left;
    margin-bottom: 1em;
}

.flex-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
}

.logomark {
    margin-right: 100px;
}

.description p {
    flex: 1;
}

.section02 .inner {
    margin: 168px auto;
    text-align: center;
}


.section04 .inner {
    margin: 168px auto;
}
.section02 h2, .section03 h2, .section04 h2 {
    font-size: 48px;
    line-height: 58px;
}


.add-text {
    font-size: 18px;
    margin-bottom: 1em;
}

.item2nd {
    margin: 0 40px;
}

.item {
	flex: 1;
    font-size: 20px;
    text-align: left;
    padding: 56px 36px;
    box-shadow: 0px 32px 104px rgba(40, 49, 56, 0.16);
    border-radius: 40px;
}

.item img {
    width: 32px;
    height: 32px;
    border-radius: 0px;
}

.item3 {
    margin-bottom: 64px;
}

.section02 .item img {
    display: block;
    width: 20%;
    margin-bottom: 8px;
}

.message {
    font-size: 20px;
}

.caution {
    padding: 24px;
    border: 1px solid #AD3234;
    color: #AD3234;
    font-size: 14px;
    font-weight: normal;
    border-radius: 24px;
}

.section03 .inner {
    padding: 168px 2em;
    text-align: center;
    color: #f5f5f7;
}


.section03 h3 {
    margin-bottom: 16px;

}

.section03 h3+p {
    margin-bottom: 32px;
}

.section03 #fc01 {
    display: flex;
    flex-direction: row-reverse;
	margin-bottom: 104px;
}

.section02 .message, .section03 .message, .section04 .message {
    margin-bottom: 64px;
}
.genre01 {
    text-align: left;
    margin-right: 80px;
}

.genre01 h3, .genre02 h3 {
    margin-bottom: 8px;
}
.genre02 {
    text-align: left;
    margin-left: 80px;
}

.section04 .card01 {
    width: 100%;
    height: 440px;
    margin-right: 40px;
    padding: 64px;
    background: #fff;
    border-radius: 40px;
    text-align: left;
    box-shadow: 0px 32px 104px rgba(40, 49, 56, 0.16);

}

.section04 .card02 {
    width: 100%;
    height: 440px;
    padding: 64px;
    background: #f6f6f8;
    border-radius: 40px;
    text-align: left;
}

.section04 h3 {
    margin-bottom: 8px;
}

.section04 h3+p {
    margin-bottom: 32px;
}

.section04 li {
    font-size: 18px;
    height: 40px;
    line-height: 40px;
}
.section04 ul li img {
	margin-top: -5px;
    margin-right: 4px;
	width: 18px;
	height: auto;

}

.title {
    display: flex;
    align-items: center;
    color: #757578;
    margin-bottom: 16px;

}

.title::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: #DADADC;
    margin: 0 10px;
    /* 文字と線の間に余白を追加 */
}

.tag-box {
    text-align: left;
}
.tag {
    display: inline-block;
    padding: 8px 32px;
    margin: 0 8px 16px 0;
    background: #f6f6f8;
    border-radius: 32px;
}
.section05 {
    padding-bottom: 168px;
}

.section06 .inner {
    text-align: center;
    width: 960px;
    box-shadow: 0px 32px 104px rgba(40, 49, 56, 0.16);
    border-radius: 40px;
    padding: 104px 0;
}
.section06 h2 {
    font-size: 48px;
	line-height: 58px;
}

.section06 h3 {
    font-size: 18px;
	line-height: 22px;
}
	
.section06 h4 {
    font-size: 40px;
	line-height: 48px;
	margin-bottom: 32px;
}


.section06 .button_main button {
    width: 200px;
    height: 72px;
    margin-bottom: 0;
    padding: 16px;
    color: #f5f5f7;


    font-size: 16px;
    border: 0;
    border-radius: 36px;
    cursor: pointer;
}

footer {
    margin: 168px 0;
}
footer .inner {
    text-align: center;

}

footer img {
    margin-bottom: 16px;
    border-radius: 0;
}

copyright {
    font-size: 12px;
    font-weight: normal;
    color: #757578;
}


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


    .section01 .flex-container img {
        margin-right: 64px;
    }
    .img-main {
        width: 80%;
        top: -60px;
    }

    .button_main button {
        margin-bottom: 32%;
    }


    .logomark {
        width: 50%;
        margin-right: 40px;
    }
    .section02 .flex-container {
        display: block;
    }

    .item {
        max-width: 100%;
        padding: 32px 16px;
    }
    .item2nd {
        margin: 24px 0px;
    }
    .section02 .item img {
        width: 80px;
        display: inline-block;
    }

    .section03 #fc01, #fc02 {
        display: block;
        flex-direction: row-reverse;
    }
    .section03 img {
        width: 100%;
    }
	.section03 h4+p {
    margin-bottom: 24px;
	}
    .genre01 {
        width: 100%;
        padding-top: 40px;
    }

    .genre02 {
        width: 100%;
        padding-top: 40px;
        margin-left: 0px;
    }


    .section04 li {
        font-size: 16px;
    }

    .section04 .card01, .section04 .card02 {
        padding: 40px;
    }

}
/*********************************************************************************************************************************************
  
 Smartphone
  
**********************************************************************************************************************************************/

@media screen and (min-width : 375px) and (max-width : 767px) {
    /* Fluid-img */

    .wrapper p {
        font-size: 18px;
    }

    .inner {
        padding: 0 2em;
    }

    .img-main {
        width: 90%;
        top: -40px;
    }

    .logo img {
        width: 80%;
        border-radius: 0;
    }
    .header-buttons button {
        width: 120px;
        padding: 16px;
    }

    h2 {
        font-size: 42px;
        line-height: 52px;
        margin-bottom: 24px;
    }
	
    .hero h3 {
        font-size: 14px;
    }

    .hero h4 {
        font-size: 30px;
        line-height: 36px;
    }

    .hero {
        margin-bottom: 4em;
    }

    .hero p {
        font-size: 13px;
        margin-bottom: 16px;
    }

    .button_main button {
        margin-bottom: 38%;
    }

    .section01 {
        position: relative;
        width: 100%;
        padding: 100px 0 168px;
        background: #000;
    }
    .logomark {
        width: 20%;
        margin-right: 2em;
        margin-bottom: 2em;
        border-radius: 0px;
    }


    .section01 h2, .section02 h2, .section03 h2, .section04 h2 {
        font-size: 32px;
        line-height: 1.4;
    }

    .section01 {
        padding: 120px 0 104px;
    }
    .section01 .inner {
        margin-top: 5%;
    }

    .section02 .inner {
		margin: 104px auto;
        text-align: left;
    }

    .section02 .flex-container {
        display: block;
    }
    .section02 .item img {
        width: 30px;
    }
    .section02 .message, .section03 .message, .section04 .message {
        margin-bottom: 32px;
    }
    .section02 .caution {
        font-size: 14px;
    }
    .item {
		font-size: 18px;
        max-width: 100%;
        padding: 40px;

    }
    .item2nd {
        margin: 40px 0px;
    }

    .section03 .inner {
        text-align: left;
        padding: 104px 2em;
    }

    .section03 #fc01, #fc02 {
        display: block;
    }
	.section03 h3 {
		font-size: 34px;
	}
    .section03 #fc01 img, #fc02 img {
        width: 100%;
        margin-bottom: 40px;
    }
	.section03 h3+p {
		margin-bottom: 16px;
	}

    .genre01 {
        width: 100%;
    }
    .genre02 {
        width: 100%;
        margin-left: 0px;
    }
    .flex-container {
        display: block;
    }
	.section04 .inner {
		margin: 104px auto;
	}
    .section04 .card01 {
        width: auto;
        height: auto;
        margin-bottom: 40px;
        margin-right: 0px;
        padding: 40px;
    }

    .section04 .card02 {
        width: auto;
        height: auto;
        padding: 40px;

    }
    .section04 li {
        font-size: 15px;
    }
    .section04 h3+p {
        font-size: 14px;
        margin-bottom: 16px;
    }
	.section05 {
		padding-bottom: 104px;
	}

    .tag {
        font-size: 14px;
		margin: 0 4px 16px 0;
        padding: 8px 16px;
		
    }

    .section06 h2 {
        font-size: 32px;
        line-height: 1.4;
    }
	
	.section06 h3 {
    font-size: 13px;
	}
	
	.section06 h4 {
    font-size: 28px;
	}

    .section06 .inner {
        width: 90%;
    }
ooter {
		margin: 104px 0;
	}
	
    footer .inner {
        padding: 0 2em;
    }
}