/*
Theme Name: Nishiki Child
Author: AnimaGate, Inc.
Template: nishiki
Version: 1.0.0
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nishiki-child
*/

@import url(//use.fontawesome.com/releases/v5.6.3/css/all.css);

/* TOPヘッダーを消す */
.home div#masthead {
    display: none !important;
}

/* 共通 */
.entry {
    position: relative;
}
.full_width_blk > .wp-block-group__inner-container {
    max-width: 1140px;
}

h2.blk_ttl {
    display: flex;
    margin-top: clamp(1.875rem, 8vw, 7.5rem) !important;
    padding-bottom: 0 !important;
    font-size: clamp(1.55rem, 6.4vw, 2.25rem) !important;
    color: #BE83F8;
    text-align: center;
    flex-direction: column;
    align-items: center;
}
h2.blk_ttl::after {
    content: "";
    width: 10.667vw;
    height: 7.608vw;
    max-width: 55px;
    max-height: 39.22px;
    background-image: url(./images/tomonyan_h2.png);
    background-size: cover;
}
h2.top_movieBlk_ttl {
    font-size: clamp(21px, 5.6vw, 1.75rem) !important;
    line-height: min(8.267vw, 2em);
    margin-bottom: 2rem;
}

.full_width_blk {
    max-width: none !important;
    width: 100vw !important;
    margin: 0 calc(50% - 50vw);
    padding: 0 clamp(1rem, 4.267vw, 2rem);
    position: relative;
    overflow: hidden;
}

/* メインビジュアル */
.main_visual_blk {
    height: 100vh;
    text-align: center;
    background: url(./images/main_visual.jpg);
    background-size: 200%;
    background-position: 98% top;
    background-repeat: no-repeat;
    background-color: #fff;
    overflow: hidden;
    background-repeat: no-repeat;
}
.main_visual_blk .wp-block-group__inner-container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(20px, 5.333vw, 80px);
}
section.main_visual_blk p {
    margin: 0 !important;
    letter-spacing: normal;
    text-shadow: 2px 2px 10px #fff, 
                -2px 2px 10px #fff, 
                2px -2px 10px #fff, 
                -2px -2px 10px #fff;
}
section.main_visual_blk p.mainVisual_catchcopy {
    font-size: clamp(1.625rem, 6.933vw, 2.25rem);
    font-weight: 900;
    line-height: clamp(2.25rem, 9.6vw, 3rem);
    color: #BE83F8;
}
p.mainVisual_subtext {
    font-size: clamp(1.125rem, 4.8vw, 1.3125rem);
    font-weight: 900;
    color: #D824AA;
}
p.mainVisual_ttl {
    font-size: clamp(0.875rem, 3.733vw, 1.125rem);
}
.tomonyan_logo {
    width: min(77vw, 370px);
    margin: 0 auto 1rem;
}
.mainVisual_link {
    display: flex;
    justify-content: center;
    gap: clamp(1rem, 4.267vw, 1.625rem);
    margin: 1.65rem auto 0;
    padding: 0;
    list-style: none;
}
.mainVisual_link > li > a {
    display: flex;
    width: 18.667vw;
    height: 18.667vw;
    min-width: 70px;
    min-height: 70px;
    max-width: 95px;
    max-height: 95px;
    justify-content: center;
    align-items: center;
    color: #fff;
    background-color: #BE83F8;
    border-radius: 50px;
    font-size: clamp(0.75rem, 3.2vw, 1rem);
    line-height: 0.8rem;
    letter-spacing: normal;
    text-decoration: none !important;
    box-shadow: 0px 3px 6px #0000004D;
}
.mainVisual_link > li > a:hover {
    background-color: #D824AA;
    color: #fff;
}

@media screen and (min-width:768px) {
    .main_visual_blk {
        background-size: 150%;
    }  
}
@media screen and (min-width:1025px) {
    .main_visual_blk {
        background: linear-gradient(to bottom, transparent 0%, transparent 80%, #fff 100%),url(./images/main_visual.jpg);
        background-size: 100vw;
        background-position: top center;
        background-repeat: no-repeat;
    }
    .main_visual_blk .wp-block-group__inner-container {
        position: absolute;
        right: 50%;
        top: 18%;
        z-index: 5;
    }
    .ribbon {
        height: 40vw;
        margin: 0 !important;
        background-image: url(./images/tomonyan_ribbon.png);
        background-size: 100vw;
        position: absolute;
        top: 26vh;
        z-index: 3;
    }
}

/* ムービー部分 */
.top_movieBlk {
    background-image: linear-gradient(to bottom, #fff 0%, transparent 40%, transparent 55%, #fff 100%),url(./images/purple_bg.jpg);
    background-size: cover;
}
@media screen and (min-width:768px) {
    .movie_groupeWrapper > div {
        display: grid;
        grid-template-rows: auto auto;
        grid-template-columns: auto auto;
        gap: clamp(1rem, 3.509vw, 40px);
    }
    .movie_groupeWrapper > div > figure {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    figure.movie_1 {
        grid-row: 1 / 2;
        grid-column: 1 / 3;
    }
    figure.movie_2 {
        grid-row: 2 / 3;
        grid-column: 1 / 2;
    }
    figure.movie_3 {
        grid-row: 2 / 3;
        grid-column: 2 / 3;
    }
}

/* What's new? */
.top_newBlk {
    background-image: linear-gradient(to bottom, #fff 0%, transparent 130%),url(./images/purple_bg.jpg);
    background-size: cover;
    padding-bottom: 30px !important;
}
.top_newBlk_list {
    padding: 1.625rem !important;
    background-color: #fff;
    border-radius: 20px;
    margin: 1rem auto 2.5rem;
    max-width: 900px;
}
.top_newBlk_list li {
    display: flex;
    flex-direction: column-reverse;
    line-height: 1.3rem !important;
    padding-bottom: 0.5rem;
}
.top_newBlk_list li:not(:last-child) {
    margin-bottom: 1rem;
    border-bottom: dashed 1px #707070;
}
.top_newBlk_list li a {
    color: #707070;
}
.top_newBlk_list .wp-block-latest-posts__post-date {
    font-weight: 900;
}
.is-layout-flex.wp-block-buttons {
    justify-content: center;
}
.wp-block-button__link {
    display: flex;
    width: 300px;
    color: #fff;
    background-color: #BE83F8;
    box-shadow: 0px 3px 6px #00000080;
    justify-content: space-evenly;
}
.wp-block-button__link::after {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: "\f0da";
}
.wp-block-button__link:hover {
    background-color: #D824AA;
    color: #fff;
}

/* Twitter */
a.top_twitter {
    display: flex;
    width: 4rem;
    height: 4.5rem;
    flex-direction: column;
    align-items: center;
    color: #fff !important;
    text-decoration: none !important;
    margin: 2rem auto 0;
    filter: drop-shadow(0px 0px 10px #8c60c2);
}
a.top_twitter svg {
    width: 3rem;
    height: 3rem;
}
@media screen and (min-width:1025px) {
    .top_newBlk_list li {
        flex-direction: row-reverse;
        justify-content: flex-end;
        gap: 1rem;
    }
    .top_newBlk_list .wp-block-latest-posts__post-date {
        flex-basis: 7.5rem;
        flex-shrink: 0;
    }
}

/* メッセージ */
#top_message {
    background: url(./images/tomonyan_message_bg_sp.jpg);
    background-size: 220%;
    background-position: top left 55%;
    background-repeat: no-repeat;
    padding-bottom: 1rem;
}
.top_message_wrapper {
    margin-top: 140vw;
}

@media screen and (min-width:1024px) {
    #top_message {
        background: linear-gradient(to left, transparent 0%, transparent 40%, #fff 60%),url(./images/tomonyan_message_bg.jpg);
        background-size: contain;
        background-position: top right -10vw;
        background-repeat: no-repeat;
    }
    #top_message > div {
        max-width: 900px;
    }
    #top_message.full_width_blk > .wp-block-group__inner-container > h2, 
    #top_message.full_width_blk > .wp-block-group__inner-container > .top_message_wrapper {
        width: 54%;
    }
    .top_message_wrapper {
        margin-top: 0;
        margin-bottom: clamp(1.875rem, 8vw, 7.5rem) !important;
    }
}
@media screen and (min-width:1200px) {
    #top_message {
        background: linear-gradient(to left, transparent 0%, transparent 35%, #fff 50%),url(./images/tomonyan_message_bg.jpg);
        background-size: contain;
        background-position: top right;
        background-repeat: no-repeat;
    }
    #top_message > div {
        max-width: 1140px;
    }
}

/* プロフィール */
#top_profile {
    background: url(./images/tomonyan_profile_bg.jpg);
    background-size: 130%;
    background-position: top left 10%;
    background-repeat: no-repeat;
}
#top_profile .wp-block-group__inner-container {
    margin-top: 90vw;
}
.top_profile_list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    list-style: none;
    margin: 0;
    padding: 30px 0;
    border-top: dashed 1px #C82E9E;
    border-bottom: dashed 1px #C82E9E;
    row-gap: 1rem;
}
.top_profile_list > li {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 900;
    color: #D824AA;
    width: 50%;
    gap: 0.5rem;
}
.top_profile_list > li > span {
    display: flex;
    width: 106px;
    height: 30px;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: #BE83F8;
    font-size: 1rem;
    font-weight: 900;
    border-radius: 15px;
}
.top_profileBlk h3 {
    color: #D824AA;
    text-align: center;
}
.top_profile_list2 {
    width: 90%;
    margin: 0 auto;
    position: relative;
    z-index: 3;
}
.top_profile_list2 > dt {
    display: block;
    font-weight: bold;
    border-left: solid 3px #D824AA;
    padding-left: 0.5rem;
}
.top_profile_list2 > dt:not(:first-child) {
    margin-top: 1rem;
}
.top_profile_list2 > dd {
    margin-left: 1rem;
}
.ribbon_reverse {
	height: 21.333vw;
	margin: 0 !important;
	background-image: url(./images/tomonyan_ribbon.png);
	background-size: 120vw;
	background-position: bottom left -15vw;
	transform: scale(-1, 1);
}
@media screen and (min-width:768px) {
    .top_profile_list > li {
        width: 25%;
    }
}
@media screen and (min-width:1140px) {
    #top_profile {
        background: linear-gradient(to bottom, transparent 0%, transparent 80%, #fff 100%),url(./images/tomonyan_profile_bg.jpg);
        background-size: 100vw;
        background-position: top left;
        background-repeat: no-repeat;
        position: relative;
        padding-top: min(3.66vw, 50px);
        padding-left: calc(50vw - 570px) !important;
        padding-right: calc(50vw - 570px) !important;
    }
    #top_profile .wp-block-group__inner-container {
        margin: 0 0 min(3.66vw, 50px) auto !important;
        width: 65%;
        max-width: 706px;
        padding: min(3.66vw, 50px);
        background-color: rgba(255,255,255,0.9);
        border-radius: 50px;
        box-sizing: border-box;
    }
    h2.top_profileBlk_ttl.blk_ttl {
        margin-top: 0 !important;
    }
    .ribbon_reverse {
        height: 40vw;
        margin: -35vw 0 0 !important;
        background-image: url(./images/tomonyan_ribbon.png);
        background-size: 100vw;
        background-position: bottom left;
        transform: scale(-1, 1);
        position: relative;
        z-index: 2;
    }
}

/* FAQ */
.top_faqBlk figure {
    width: 80vw;
    max-width: 426px;
    height: auto;
    margin: 0 auto;
}
.top_faqBlk_list > dt {
	font-weight: 900;
	text-align: center;
	line-height: 1.3rem;
	margin-bottom: 0.5rem;
}
.top_faqBlk_list > dd {
    display: block;
    box-sizing: border-box;
    margin: 0 0 2rem 0;
    padding: 1rem;
    background-color: #F2E7FD;
    border-radius: 30px;
    line-height: 1.5rem;
    position: relative;
    box-shadow: 0 3px 6px 0 rgb(0 0 0 / 50%);
}
.top_faqBlk_list > dd span {
    display: block;
    color: #D824AA;
}
.top_faqBlk_list > dd span:not(:first-child) {
    margin-top: 0.5rem;
}
@media screen and (min-width:768px) {
    #top_faq div {
        display: grid;
        grid-template-rows: auto auto;
        grid-template-columns: auto auto;
        column-gap: 2rem;
        align-items: center;
    }
    .top_faqBlk_ttl.blk_ttl {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
    }
    .top_faqBlk figure {
        grid-column: 1 / 3;
        grid-row: 2 / 3;
    }
    .top_faqBlk_list.top_faqBlk_listLeft {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
    }
    .top_faqBlk_list.top_faqBlk_listRight {
        grid-column: 2 / 3;
        grid-row: 3 / 4;
    }
}
@media screen and (min-width:1140px) {
    #top_faq {
        margin-bottom: 3rem;
    }
    #top_faq div {
        display: grid;
        grid-template-rows: auto auto;
        grid-template-columns: calc((100% / 3) - 1rem) calc((100% / 3) - 1rem) calc((100% / 3) - 1rem);
        column-gap: 2rem;
        align-items: center;
    }
    .top_faqBlk_ttl.blk_ttl {
        grid-column: 1 / 4;
        grid-row: 1 / 2;
        margin-top: 2.5rem !important;
    }
    .top_faqBlk figure {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        width: 100%;
    }
    .top_faqBlk_list.top_faqBlk_listLeft {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }
    .top_faqBlk_list.top_faqBlk_listRight {
        grid-column: 3 / 4;
        grid-row: 2 / 3;
    }
    .top_faqBlk_listLeft > dd::after {
        content: "";
        position: absolute;
        border: 12px solid transparent;
        border-left: 12px solid #F2E7FD;
        top: 30%;
        left: 99.6%;
        transform: scale(1, 0.6);
    }
    .top_faqBlk_listRight > dd::before {
        content: "";
        position: absolute;
        border: 12px solid transparent;
        border-right: 12px solid #F2E7FD;
        top: 30%;
        right: 99.6%;
        transform: scale(1, 0.6);
    }
}

/* footer */
.footer-content {
    background: url(./images/purple_bg.jpg);
    background-size: cover;
    position: relative;
    z-index: 0;
}
.footer-content::after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 1;
    position: absolute;
    top: 0;
    opacity: 0.3;
}
#footer-widget {
	z-index: 2;
	position: relative;
    flex-direction: column;
    align-items: center;
}
.footer_btn_wrapper {
    position: relative;
}
.footer_btn_wrapper::after {
    content: "";
    display: block;
    width: 81px;
    height: 71px;
    background-image: url(./images/slantingRibbon.png);
    background-size: cover;
    position: absolute;
    top: 50%;
    right: 1%;
}
.footer_btn {
    display: flex;
    width: 343px;
    background-color: #BE83F8;
    color: #fff !important;
    border-radius: 100px;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    box-shadow: 0 3px 6px 0 rgb(0 0 0 / 50%);
}
.footer_btn::before {
    content: "\f0e0";
    display: flex;
    height: 76px;
    font-family: 'Font Awesome 5 Free';
    font-size: 3.2rem;
    font-weight: 900;
    align-items: center;
}
.footer_btn:hover {
    background-color: #D824AA;
    color: #fff;
}
.footer_btn_txt {
    font-size: 1.3125rem;
    margin: 0;
    letter-spacing: 0;
    line-height: 1.55rem;
}
.footer_btn_sub {
    display: block;
    font-size: 0.75rem;
    text-align: center;
    line-height: 0.75rem;
}
section#block-7 {
    margin-bottom: 0 !important;
    width: auto;
}
section#block-8 {
    text-align: center;
    font-size: 1rem;
    margin-right: 0 !important;
}

section#block-8 a {
    color: #D824AA;
}
section#block-8 a:hover {
    text-decoration: underline;
}

#footer .wrap .copyright {
	width: 100vw;
	margin: 0 calc(50% - 50vw);
    padding: 0.5rem 0 !important;
	background: rgba(190, 131, 248, 0.7);
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
    z-index: 2;
}
@media screen and (min-width:768px) {
    section#block-7 {
        margin: 2rem !important;
        width: auto;
    }
    .footer_btn {
        width: 450px;
        height: 100px;
        gap: 1.5rem;
    }
    .footer_btn_wrapper::after {
        width: 130px;
        height: 120px;
        top: 25px;
        right: -50px;
    }
}

/* シングル・アーカイブ */
.archive header::after, 
.error404 header::after, 
.search header::after, 
.paged header::after, 
.blog header::after {
    background-color: transparent !important;
}
.archive .page-header, 
.error404 .page-header, 
.search .page-header, 
.paged .page-header, 
.blog .page-header {
    color: #D824AA !important;
}
.single .page-header, .single .page-header a {
    color: #D824AA !important;
}
header.post {
    background-image: url(./images/purple_bg.jpg);
}