@charset "utf-8";

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


body{ font-family: YakuHanJP_Noto, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; font-weight: 400;}

.fnt-bsc{ font-family: YakuHanJP_Noto, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;}
.fnt-bsc-noyh{ font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;}
.fnt-ex1-kushi{ font-family: 'M PLUS 1p', sans-serif; }
.fnt-ac0{ color:#000; }
.fnt-ac1{ color:#a3003e; }
.fnt-ac2{ color:#e5005a; }
.fnt-ac3{ color:#e4007f; }
.fnt-ac4{ color:#470a21; }
.fnt-ac5{ color:#ffffff; }

a,a:visited {color: #e5005a;}
a:hover,a:active {color: #e5005a; }


/*
//
//
// for PC
//
//
*/


/* base */
body{ color: #000; background:#fff url("../images/bg-pattern.png") repeat center top; background-size: calc(1280/3000*100vw) auto;  }

.lo-part,.lo-cont{ position: relative; width: 100%; display: block; }
.part-body{ position: relative; background-color: transparent; max-width: 1000px; padding: 0; margin: 0 auto; overflow: visible; }
.part-body > .inner{  }

.cont-title{ width: 100%; padding: 1.4em 0; color:#FFF; text-align: center; background: #6a0028; border-bottom: #e4007e solid .25em; position: relative; margin: 0 ; z-index: 2; }
.cont-title:before,
.cont-title:after{ content:""; display: block; width: 100%; min-height: 100%; position: absolute; top:0; left:0; z-index: 1; background: url("../images/cont-title-bg.png") no-repeat left top; background-size: auto 100%; }
.cont-title:after{ transform: rotate(180deg); }
.cont-title > h2{ font-size: 2em; margin: 0; font-weight: 900; letter-spacing: .1em; line-height: 1; position: relative; z-index: 2; }

.text-a{ font-size: 2.5em; font-weight: bold; letter-spacing: .05em; margin: 0; }
.text-a span{ font-size: 1.333em; color:#a3003e; }
.text-b{ font-size: 1.8em; font-weight: bold; letter-spacing: .05em; margin: 0; }

.sep-line-t{ border-top:#a3003e solid .666em; }
.sep-line-b{ border-bottom:#a3003e solid .666em; }
.bg-ka{ background-color: rgba(0,0,0,.05); }
.bg-strp{ background: url("../images/bg-strp.webp") repeat center top; background-size: 100%; }

.btn-a{ text-align: center; }
.btn-a a{ display: inline-block; }
.btn-a a:hover{ transform: scale(1.1); }


/* part */
.cont-header{ position: relative; margin-bottom: 0; }
.cont-header:before{ content:""; display: block; width: 100%; height: 10em; position: absolute; top:0; background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 60%); z-index: 1;  }
.cont-header .inner{ width: 100%; margin: 0 auto; padding: 2em 0 0 0; position: relative; z-index: 2; }
.cont-header .logo{ width: 26%; margin: 0 auto 2em auto; }
.cont-header .eye-catch{ width: 100%; line-height: 0; margin: 0 auto; position: relative;  }
.cont-header .main-ttl{ width: 100%; padding: 1em 0; background-color: #FFF; margin: 0; }
.cont-header .main-ttl > p{ width: 57.35%; margin: 0 auto; }
.cont-header .title{ font-size: 1em; text-align: center; margin-bottom: 4em; position: relative; }
.cont-header .title.title-post_form p{ width: 35%; margin: 0 auto; }
.cont-header .title.title-post_finish p{ width: 28%; margin: 0 auto; }
.cont-header .title.title-result p{ width: 28%; margin: 0 auto; }
.lead-text{ padding: 3em 2em; text-align: center; line-height: 2; color:#000;  }
.finish-text{ padding: 4em 0 0 0; text-align: center; line-height: 2; color:#000; position: relative; overflow: hidden; }

.finish-text .thanks-vis{ display: block; width: 70%; position: absolute; top:5em; left:-15em; z-index: 1; }
.finish-text .thanks-voice{ padding:2em 12.5% 10em 57.5% ; }

.finish-text-msg{ padding: 5em 2em; color:#a3003e; background-color: rgba(255,255,255,.75); position: relative; z-index: 2; }

.cont-block1{ position: relative; margin-bottom: 0; }
.cont-block1 .inner{ font-size: 1.2em; padding: 3em 2em; margin: 0 auto; text-align: center; color:#a3003e; }

.cont-block2{ position: relative; margin-bottom: 0; }
.cont-block2 .inner{ padding: 3em 0; margin: 0 auto; text-align: center; }
.character-list{ display: flex; flex-wrap: wrap; }
.character-post-list{ width: 95%; margin: 0 auto; display: flex; flex-wrap: wrap; }
.character-post-list > div{ width: 33.33%; padding: 1.5em; }

.cont-block3{ padding: 0; position: relative; margin-bottom: 0; }
.cont-block3 .inner{ padding: 5em 0; margin: 0 auto; text-align: center; color:#a3003e; }
.btn-post_page{ margin-bottom: 3em; }
.btn-post_page.btn-a a{ width: 30%; }

.cont-block4{ padding: 0; position: relative; margin-bottom: 0; }
.cont-block4 .inner{ padding: 0; margin: 0 auto; text-align: center; color:#a3003e; position: relative; }
.cont-block4 .inner:before{ content:""; display: block; width: 100%; height: 20em; position: absolute; bottom:0; background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); z-index: 1; }
.att-fig{ width: 75%; margin: 0 auto; position: relative; z-index: 2; }
.cont-block4 .text-a{ width: 100%; position: absolute; bottom: 5em; z-index: 2; }

.cont-block5{ padding: 0; position: relative; margin-bottom: 0; }
.cont-block5 .inner{ padding: 0; margin: 0 auto; text-align: center; color:#a3003e; }

.character-result-list{ display: flex; flex-wrap: wrap; justify-content: space-around; }
.character-result-list .rk{ display: block; position: relative; background: #FFF; margin-bottom: 2px;}

.character-result-list .rk .cont-title.rk-title:before,
.character-result-list .rk .cont-title.rk-title:after{ background-size: auto 3em; }
.character-result-list .rk .cont-title.rk-title > h2{  }

.character-result-list .rk .rk-vis{ position: relative; padding-bottom: 1em; background:  url("../assets/result/rkbg.webp") no-repeat center bottom; background-size: 100%; }
.character-result-list .rk .rk-vis div{ display: block; position: relative; z-index: 2; }
.character-result-list .rk .rk-voice{ display: flex; flex-wrap: wrap; width: calc(587/2000*100em); margin: 0 auto; padding: 1.5em 0; }
.character-result-list .rk .rk-voice a{  margin: .5em 0; }

.character-result-list .rk.rk1{ width: 100%; }
.character-result-list .rk.rk1 .cont-title.rk-title > h2 span{ display: inline-block; width: calc(692/2000*100em*0.5); margin-left: 17em; }
.character-result-list .rk.rk1 .rk-vis div{ width: calc(969/2000*100em); margin: -20em auto 0 1em;  }
.character-result-list .rk.rk1 .rk-voice{ position: absolute; top:20em; left:60em; margin: 0; }

.character-result-list .rk.rk2{ width: calc(50% - 2px ); }
.character-result-list .rk.rk2 .cont-title.rk-title > h2 span{ display: inline-block; width: calc(695/2000*100em*0.5);  }
.character-result-list .rk.rk2 .rk-vis div{ width: calc(566/2000*100em); margin: -1em auto 0 auto;  }

.character-result-list .rk.rk3{ width: calc(50% - 2px ); }
.character-result-list .rk.rk3 .cont-title.rk-title > h2 span{ display: inline-block; width: calc(793/2000*100em*0.5);  }
.character-result-list .rk.rk3 .rk-vis div{ width: calc(525/2000*100em); margin: -0.7em auto 0 auto;  }

.character-result-list .rk.rk4{ width: calc(33.33% - 2px ); }
.character-result-list .rk.rk4 .cont-title.rk-title > h2 span{ display: inline-block; width: calc(555/2000*100em*0.5);  }
.character-result-list .rk.rk4 .rk-vis div{ width: calc(289/2000*100em); margin: 0em auto 0 auto;  }

.character-result-list .rk.rk5{ width: calc(33.33% - 2px ); }
.character-result-list .rk.rk5 .cont-title.rk-title > h2 span{ display: inline-block; width: calc(596/2000*100em*0.5);  }
.character-result-list .rk.rk5 .rk-vis div{ width: calc(340/2000*100em); margin: 1.1em auto 0 auto;  }

.character-result-list .rk.rk6{ width: calc(33.33% - 2px ); }
.character-result-list .rk.rk6 .cont-title.rk-title > h2 span{ display: inline-block; width: calc(557/2000*100em*0.5);  }
.character-result-list .rk.rk6 .rk-vis div{ width: calc(286/2000*100em); margin: -1.1em auto 0 auto;  }

.cont-footer{ position: relative; margin-bottom: 0; background-color: #a3003e; color: #FFF; }
.cont-footer .inner{ padding: 5em 0 1em 0; margin: 0 auto; text-align: center; }
.ui-pagetop{ width: 6%; margin: 0 auto 5em auto; }
.copyrihgt{ text-align: center; font-size: 1em; margin-bottom: 0; padding: 0; }


@media (min-width:1000px) {
body{ font-size: 10px; }
}


/*
//
//
// for Smart Phone
//
//
*/


@media (max-width: 767px) {


/* base */
body{ background-size: 100%; }

.cont-title{ padding: 1.4em 0; }
.cont-title:before,
.cont-title:after{ background-size: auto 2em; }
.cont-title > h2{ font-size: 2em; }

.text-a{ font-size: 1.7em; font-weight: bold; letter-spacing: .05em; margin: 0; }
.text-a span{ font-size: 1.333em; color:#a3003e; }
.text-b{ font-size: 1.3em;  }

.sep-line-t{ border-top:#a3003e solid .333em; }
.sep-line-b{ border-bottom:#a3003e solid .333em; }


/* part */
.cont-header:before{ height: 10em; }
.cont-header .logo{ width: 40%; }
.cont-header .main-ttl > p{ width: 80%; }
.cont-header .title{  margin-bottom: 3em; }
.cont-header .title.title-post_form p{ width: 55%; margin: 0 auto; }
.lead-text{ padding: 2em 1em; line-height: 1.8; }

.cont-block1 .inner{ padding: 2em 1em; }

.cont-block2 .inner{ padding: 2em 0; }
.character-post-list > div{ width: 50%; }

.cont-block3 .inner{ padding: 5em 0; }
.btn-post_page{ margin-bottom: 3em; }
.btn-post_page.btn-a a{ width: 60%; }

.cont-block4 .inner:before{ height: 30em;  }
.att-fig{ width: 100%; }
.cont-block4 .text-a{ position: absolute; bottom: 3em;  }

.cont-block5{ }

.character-result-list .rk .cont-title.rk-title:before,
.character-result-list .rk .cont-title.rk-title:after{ background-size: auto 3em; }
.character-result-list .rk .cont-title.rk-title > h2{  }

.character-result-list .rk .rk-vis{ position: relative; padding-bottom: 1em; background:  url("../assets/result/rkbg.webp") no-repeat center bottom; background-size: 100%; }
.character-result-list .rk .rk-vis div{ display: block; position: relative; z-index: 2; }
.character-result-list .rk .rk-voice{ display: flex; flex-wrap: wrap; width: calc(587/2000*100em*0.8); margin: 0 auto; padding: 1.5em 0; }
.character-result-list .rk .rk-voice a{  margin: .5em 0; }

.character-result-list .rk.rk1{ width: 100%; }
.character-result-list .rk.rk1 .cont-title.rk-title > h2 span{ display: inline-block; width: calc(692/2000*100em*0.4); margin-left: 0; }
.character-result-list .rk.rk1 .rk-vis div{ width: calc(969/2000*100em*0.55); margin: -1em auto 0 auto;  }
.character-result-list .rk.rk1 .rk-voice{ position: relative; top:inherit; left:inherit; margin: 0 auto; }

.character-result-list .rk.rk2{ width: 100%; }
.character-result-list .rk.rk2 .cont-title.rk-title > h2 span{ display: inline-block; width: calc(695/2000*100em*0.4);  }
.character-result-list .rk.rk2 .rk-vis div{ width: calc(566/2000*100em*0.8); margin: -1em auto 0 auto;  }

.character-result-list .rk.rk3{ width: 100%; }
.character-result-list .rk.rk3 .cont-title.rk-title > h2 span{ display: inline-block; width: calc(793/2000*100em*0.4);  }
.character-result-list .rk.rk3 .rk-vis div{ width: calc(525/2000*100em*0.8); margin: -0.7em auto 0 auto;  }

.character-result-list .rk.rk4{ width: 100%; }
.character-result-list .rk.rk4 .cont-title.rk-title > h2 span{ display: inline-block; width: calc(555/2000*100em*0.4);  }
.character-result-list .rk.rk4 .rk-vis div{ width: calc(289/2000*100em*0.9); margin: 0em auto 0 auto;  }

.character-result-list .rk.rk5{ width: 100%; }
.character-result-list .rk.rk5 .cont-title.rk-title > h2 span{ display: inline-block; width: calc(596/2000*100em*0.4);  }
.character-result-list .rk.rk5 .rk-vis div{ width: calc(340/2000*100em*0.9); margin: 1.1em auto 0 auto;  }

.character-result-list .rk.rk6{ width: 100%; }
.character-result-list .rk.rk6 .cont-title.rk-title > h2 span{ display: inline-block; width: calc(557/2000*100em*0.4);  }
.character-result-list .rk.rk6 .rk-vis div{ width: calc(286/2000*100em*0.9); margin: -1.1em auto 0 auto;  }

.cont-footer .inner{ padding: 3em 0 1em 0;  }
.ui-pagetop{ width: 12%; margin: 0 auto 3em auto; }
.copyrihgt{ font-size: .8em; }
}