@charset "utf-8";

@import url(//fonts.googleapis.com/earlyaccess/sawarabimincho.css);
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
@import url(//use.fontawesome.com/releases/v5.0.6/css/all.css);

/*
	font-family:"FontAwesome";
	font-family:"Font Awesome 5 Free";
*/


/*========================================
 Base
========================================*/
html {font-size:62.5%;}
body {font-size:1.2rem;}

/* PC */
@media screen and (min-width: 641px) {
.v2-headerMain{ 
    position:relative;
    z-index:10;
}
#footer_link{
    position:absolute;
    bottom:0;
}

.spOnly {display:none;}

body{
    position:relative;
    background:url("../images/bg.jpg") no-repeat center top fixed;
    background-size:cover;
    height:100vh;
    /*min-height:780px;*/
}
#Contents{
    position:absolute;
    top:49%;
    left:50%;
    transform:translateX(-50%) translateY(-50%);
    background:url("../images/top_contents_bg.png") center top no-repeat;
    height:775px;
    border:8px solid #253660;
    box-sizing:border-box;
}

#Contents header{
    position:relative;
    padding-top:550px;
}
header h1 {display:none;}
#Contents header div{
    position:absolute;
    top:421px;
    left:50%;
    transform:translateX(-50%);
}

main{
    width:1080px;
    margin:0 auto;
}
#StartBtn{
    position:relative;
    display:block;
    overflow:hidden;
    width:213px;
    height:33px;
    margin:0 auto;
    cursor:pointer;
}
#StartBtn img{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    display:block;
    width:100%;
}

footer .copyright{
    width:100%;
    margin:100px 0 0;
    color:#fff;
    text-align:center;
    text-shadow:1px 1px 2px #000;
}


/* Question */
#Q_Contents{
    position:absolute;
    top:50%;
    left:50%;
    transform:translateX(-50%) translateY(-50%);
    background:url("../images/q_bg.jpg") center -250px no-repeat;
    text-align:center;
    border:8px solid #000;
    box-sizing:border-box;
}
#Q_Contents::before{
    content:"";
    background:rgba(0, 0, 0, .32);
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
.Q_TitBar{
    position:relative;
    display:inline-block;
    background:#000;
    width:80%;
    margin:0 auto;
    padding:10px 2em;
    font-size:4rem;
    color:#fff;
    border-top:4px solid #c1d6cb;
    border-bottom:4px solid #c1d6cb;
    outline:8px solid #000;
    box-sizing:border-box;
}
#Q_Contents header {display:none;}

#Q_Contents main {padding:50px 0 30px;}
.Q_TitBar {margin-bottom:50px;}

#AnswerBtnWrap li{
    width:54%;
    margin:0 auto 20px;
    list-style:none;
}
#AnswerBtnWrap li a{
    position:relative;
    display:block;
    background:#fff;
    padding:14px 1em 14px calc(2em + 20px);
    font-size:3.6rem;
    color:#253660;
    text-align:left;
    text-decoration:none;
    border:2px solid #253660;
    border-radius:4px;
}
#AnswerBtnWrap li a::before{
    content:">>";
    display:block;
    position:absolute;
    top:50%;
    left:0;
    transform:translateY(-56%);
    margin-left:20px;
}
#AnswerBtnWrap li a:hover{
    background:#253660;
    color:#fff;
}

#Q_Contents footer .copyright{
    position:relative;
    margin:0 auto 40px;
}


/* 診断結果 */
#R_Contents{
    width:1080px;
    margin:0 auto;
    padding-top:14px;
    border-left:5px solid #253660;
    border-right:5px solid #253660;
    box-sizing:border-box;
    font-family:"Sawarabi Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
}
#R_Contents main{
    background-size:100%;
    width:1080px;
}
#R_Contents main#Majo {background-size:100%;}

#TypeWrap{
    font-size:3.6rem;
    text-align:center;
}
#TypeWrap .TypeTit{
    position:relative;
    display:inline-block;
    width:580px;
    height:37px;
    margin:14px;
    padding:12px 2em 8px;
    font-size:3rem;
    color:#fff;
    z-index:10;
}
#TypeWrap .TypeTit::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:#000;
    transform:skewX(-30deg);
    z-index:-10;
}

#Nevi #TypeWrap {margin-bottom:40px;}
#Majo #TypeWrap .TypeTit{
    background:none;
    margin-bottom:40px;
}


/* 名前 */
#TugaiWrap{
    position:relative;
    text-align:center;
}
#TugaiCharaImg {display:none;}
#Majo #TugaiCharaImg{
    display:inherit;
    width:1070px;
}
#Majo #TugaiCharaImg img {width:100%;}
#TugaiName01,#TugaiName02{
    position:relative;
    display:inline-block;
    width:168px;
    height:46px;
    padding:4px 0;
    font-size:3rem;
    text-align:center;
    z-index:10;
}
#TugaiName01 p,#TugaiName02 p{
    padding-top:6px;
    font-size:1.4rem;
    border-top:1px solid #000;
}
#TugaiInfo{
    display:inline-block;
    width:600px;
    margin:430px auto 20px;
    padding:1rem;
    font-size:1.7rem;
    text-align:left;
    line-height:1.5;
}
#HachidoriTsuru #TugaiInfo {margin-top:440px;}
#SuzumeEnaga #TugaiInfo {margin-top:455px;}
#FukurouFuramingo #TugaiInfo {margin-top:455px;}
#TsubameMozu #TugaiInfo {margin-top:455px;}
#Majo #TugaiInfo {
    margin:20px auto 20px;
    width:452px;
}


/* キャラクター紹介 */
#CharaWrap{
    overflow:hidden;
    position:relative;
    background:#d7dddf;
    width:90%;
    margin:0 auto 40px;
}
#CharaBox{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    height:400px;
    border:1px solid #000;
    box-sizing:border-box;
}
#CharaBox::before{
    position:absolute;
    top:0;
    left:0;
    content:url("../images/frame.png");
    z-index:100;
}
#CharaBox::after{
    position:absolute;
    bottom:0;
    right:0;
    content:url("../images/frame.png");
    transform:rotate(180deg);
    z-index:100;
}

.CharaTopBox{
    position:relative;
    display:flex;
    align-items:center;
    width:360px;
    height:400px;
    padding-left:60px;
}
#CharaKw, #CharaKw2{
    width:150px;
    height:70%;
}
#CharaKw img, #CharaKw2 img {height:100%;}
#CharaTxt{
    display:table-cell;
    width:540px;
    padding:0 5%;
    text-align:left;
    box-sizing:border-box;
    z-index:100;
}
#Name{
    margin-bottom:4px;
    font-size:3.6rem;
}
#Nevi + #CharaTxt #Name {margin-bottom:20px;}
#Cv{
    margin:0 0 20px .4em;
    font-size:1.6rem;
}
#Serif{
    margin-bottom:24px;
    font-size:2.4rem;
}
/*#Furamingo + #CharaTxt #Name, #Furamingo + #CharaTxt #Cv, #Furamingo + #CharaTxt #Serif{
    text-shadow:2px 2px 2px #fff, -2px -2px 2px #fff,
               -2px 2px 2px #fff,  2px -2px 2px #fff,
                2px 0px 2px #fff, -2px -0px 2px #fff,
                0px 2px 2px #fff,  0px -2px 2px #fff;
}*/
#Introduction{
    font-size:1.4rem;
    line-height:1.4;
}


/*============ キャラ別設定 ============*/

/* ツガイ画像 */
#KarasuHakucho {background:url("../images/chara/karasu_hakucho.png") center 8px no-repeat;}
#HachidoriTsuru {background:url("../images/chara/hachidori_tsuru.png") 30px 16px no-repeat;}
#SuzumeEnaga {background:url("../images/chara/suzume_enaga.png") 0 32px no-repeat;}
#FukurouFuramingo {background:url("../images/chara/furamingo_fukurou.png") -10px 30px no-repeat;}
#TsubameMozu {background:url("../images/chara/tsubame_mozu.png") 14px 27px no-repeat;}
#Majo{
    /*background:url("../images/chara/majo.png") -4px 160px no-repeat;
    background-size:contain;*/
    padding-top:14px;
    box-sizing:border-box;
}


/* 名前 */
#KarasuHakucho #TugaiName01{
    position:absolute;
    top:16px;
    left:176px;
}
#KarasuHakucho #TugaiName02{
    position:absolute;
    top:101px;
    right:104px;
}
#HachidoriTsuru #TugaiName01{
    position:absolute;
    top:63px;
    left:110px;
}
#HachidoriTsuru #TugaiName02{
    position:absolute;
    top:126px;
    right:29px;
}
#SuzumeEnaga #TugaiName01{
    position:absolute;
    top:126px;
    left:138px;
}
#SuzumeEnaga #TugaiName02{
    position:absolute;
    top:126px;
    right:52px;
}
#FukurouFuramingo #TugaiName01{
    position:absolute;
    top:104px;
    left:132px;
}
#FukurouFuramingo #TugaiName02{
    position:absolute;
    top:257px;
    right:89px;
}
#TsubameMozu #TugaiName01{
    position:absolute;
    top:85px;
    left:112px;
}
#TsubameMozu #TugaiName02{
    position:absolute;
    top:126px;
    right:51px;
}


/* キャラ画像ごと */
#Karasu #CharaKw, #Hachidori #CharaKw, #Enaga #CharaKw, #Fukurou #CharaKw, #Mozu #CharaKw{
    position:absolute;
    right:0;
}
#Karasu .CharaImg{
    position:absolute;
    top:-29px;
    left:34px;
    overflow:hidden;
    height:428px;
}
#Hakucho .CharaImg{
    position:absolute;
    top:14px;
    left:180px;
}

#Nevi #CharaKw{
    position:absolute;
    right:0;
}
#Nevi .CharaImg{
    position:absolute;
    top:42px;
    right:24px;
    overflow:hidden;
    height:428px;
}
#Nevi .CharaImg img {height:91%;}

#Hachidori .CharaImg{
    position:absolute;
    top:-29px;
    left:9px;
    overflow:hidden;
    height:428px;
}
#Tsuru .CharaImg{
    position:absolute;
    top:23px;
    left:152px;
}
#Enaga .CharaImg{
    position:absolute;
    top:29px;
    left:34px;
    overflow:hidden;
    height:428px;
}
#Suzume .CharaImg{
    position:absolute;
    top:-111px;
    left:180px;
}
#Fukurou .CharaImg{
    position:absolute;
    top:10px;
    left:-21px;
    overflow:hidden;
    height:428px;
}
#Furamingo .CharaImg{
    position:absolute;
    top:8px;
    left:180px;
    overflow:hidden;
    height:391px;
}
#Mozu .CharaImg{
    position:absolute;
    top:13px;
    left:40px;
    overflow:hidden;
    height:428px;
}
#Tsubame .CharaImg{
    position:absolute;
    top:8px;
    left:80px;
}


/* 下部ボタン */
#BtnWrap p{
    margin-bottom:1em;
    font-size:2rem;
}
#Majo #BtnWrap p {text-align:center;}
#BtnWrap ul#BtnBox{
    width:40%;
    margin:0 auto 40px;
}
#BtnWrap li{
    text-align:center;
    list-style:none;
}
#BtnWrap #BtnBox li a{
    display:block;
    background:#253660;
    margin-bottom:20px;
    padding:10px 2em;
    font-size:2rem;
    color:#fff;
    text-decoration:none;
    transition:0.5s;
}
#BtnWrap #BtnBox li a::before{
	font-family:"Font Awesome 5 Free";
    content:"\f101";
    font-weight:900;
    margin-right:8px;
}
#BtnWrap #BtnBox li a:hover {background:#999;}

#BtnWrap ul#BnrBox{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
}
#BtnWrap ul#BnrBox li{
    display:table-cell;
    max-height:111px;
    margin:0 10px;
}
#BtnWrap ul#BnrBox li a{
    display:block;
    transition:0.6s;
}
#BtnWrap ul#BnrBox li a img {height:111px;}
#BtnWrap ul#BnrBox li a img:hover {opacity:0.7;}

#R_Contents footer .copyright{
    margin:40px auto;
    padding-bottom:20px;
    color:#000;
    text-shadow:none;
}

#Majo #BtnWrap {padding-top:200px;}
#Majo + footer .copyright {margin:0;}
#Majo #BtnWrap {padding:20px 0 40px;}
}




/* スマホ */
@media screen and (max-width: 640px) {

.pcOnly {display:none;}
body{
    background: url("../images/bg.jpg") center top no-repeat;
    background-size:cover;
    /*height:100vh;*/
}

#Contents{
    width:96%;
    margin:20px auto;
    border:4px solid #253660;
    box-sizing:border-box;
}
#Contents header{
    background:url("../images/sp_contents_bg.png") center top no-repeat;
    background-size:100%;
    width:100%;
    margin-bottom:30px;
}
header h1 {display:none;}
#Contents header div{
    width:90%;
    margin:0 auto;
    padding-top:200px;
    text-align:center;
}
#Contents header div img {width:100%;}
#Contents header div img:first-of-type{
    width:80%;
    margin-bottom:10px;
}

main{
    width:90%;
    margin:0 auto;
}
#StartBtn{
    width:213px;
    margin:0 auto;
}
#StartBtn img {width:100%;}
#StartBtn img:nth-of-type(2) {display:none;}

footer .copyright{
    width:100%;
    margin:40px 0 0;
    padding-bottom:40px;
    color:#fff;
    text-align:center;
    text-shadow:1px 1px 2px #000;
}


/* Question */
#Q_Contents{
    background:url("../images/q_bg.jpg") center top no-repeat;
    background-size:auto 100vh;
    width:96%;
    margin:20px auto 0;
    text-align:center;
    border:4px solid #000;
    box-sizing:border-box;
}
.Q_TitBar{
    position:relative;
    display:inline-block;
    background:#000;
    width:100%;
    margin:0;
    padding:10px 2em;
    font-size:1.8rem;
    color:#fff;
    border-top:3px solid #c1d6cb;
    border-bottom:3px solid #c1d6cb;
    outline:6px solid #000;
    box-sizing:border-box;
}
#Q_Contents header {display:none;}

#Q_Contents main{
    padding:50px 0 20px;
}
.Q_TitBar {margin-bottom:30px;}

#AnswerBtnWrap li{
    width:90%;
    margin:0 auto 20px;
    list-style:none;
}
#AnswerBtnWrap li a{
    position:relative;
    display:block;
    background:#fff;
    padding:14px 2em 14px calc(2em + 20px);
    font-size:1.6rem;
    color:#253660;
    text-align:left;
    text-decoration:none;
    border:2px solid #253660;
    border-radius:4px;
}
#AnswerBtnWrap li a::before{
    content:">>";
    display:block;
    position:absolute;
    top:50%;
    left:0;
    transform:translateY(-56%);
    margin-left:20px;
}

#Q_Contents footer .copyright{
    position:relative;
    margin:0 auto 0;
    padding-bottom:30px;
}


/* 診断結果 */
#R_Contents{
    width:100%;
    margin:0;
    padding-top:14px;
    border-left:5px solid #253660;
    border-right:5px solid #253660;
    box-sizing:border-box;
    font-family:"Sawarabi Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
}

#Majo section{
    width:90%;
    margin:0 auto;
}


#TypeWrap{
    position:relative;
    font-size:1.3rem;
    text-align:center;
    z-index:10;
}
#Nevi #TypeWrap p:first-of-type {font-size:1.5rem;}
#Majo #TypeWrap p:first-of-type{
    padding-top:14px;
    font-size:1.5rem;
}
#TypeWrap .TypeTit{
    position:relative;
    display:inline-block;
    width:100%;
    height:38px;
    margin:14px 0;
    padding:8px 0;
    font-size:2rem;
    color:#fff;
    z-index:10;
}
#TypeWrap .TypeTit::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:#000;
    transform:skewX(-30deg);
    z-index:-10;
}
#Nevi #TypeWrap .TypeTit, #Majo #TypeWrap .TypeTit {height:21px;}


/* 名前 */
#TugaiWrap{
    position:relative;
    width:100%;
    padding-top:30px;
    text-align:center;
}
#TugaiCharaImg{
    position:relative;
    width:calc(100% - 6px);
    margin:-66px auto 0;
}
#TugaiCharaImg img {width:120%;}
#TugaiNameBox{
    display:flex;
    margin-top:-10px;
}
#TugaiName01,#TugaiName02{
    display:table-cell;
    width:calc(100% / 2);
    padding:8px 1em;
    font-size:1.4rem;
    text-align:center;
}
#TugaiName01 p, #TugaiName02 p{
    padding-top:4px;
    border-top:1px solid #000;
}

#TugaiInfo{
    display:inline-block;
    width:100%;
    margin:0;
    padding:1rem;
    font-size:1.3rem;
    text-align:left;
    line-height:1.5;
    box-sizing:border-box;
}
#Majo #TugaiInfo{
    width:120%;
    margin-left:-8%;
}


/* キャラクター紹介 */
#CharaWrap{
    overflow:hidden;
    position:relative;
    background:#d7dddf;
    width:100%;
    margin:0 auto 30px;
}
#CharaBox{
    position:relative;
    width:100%;
    border:1px solid #000;
    box-sizing:border-box;
}
#CharaBox::before{
    position:absolute;
    top:-1px;
    left:-1px;
    content:url("../images/frame.png");
}
#CharaBox::after{
    position:absolute;
    bottom:-1px;
    right:-1px;
    content:url("../images/frame.png");
    transform:rotate(180deg);
}

.CharaTopBox{
    display:flex;
    align-items:flex-start;
    width:100%;
    height:300px;
}
#CharaKw{
    position:relative;
    width:30%;
    top:66px;
    right:-56%;
}
#CharaKw2{
    position:relative;
    width:30%;
    top:66px;
    left:20%;
}
.CharaImg {width:58%;}
.CharaImg img{
    width:auto;
    height:100%;
}
.CharaImg#Nevi img {width:80%;}
#CharaKw img, #CharaKw2 img {width:100%;}

#CharaTxt{
    width:100%;
    text-align:left;
    box-sizing:border-box;
}
#Nevi + #CharaTxt #Name {margin-bottom:20px;}
#Name{
    margin-bottom:4px;
    font-size:2rem;
    text-align:center;
}
#Cv{
    margin:0 0 20px;
    font-size:1.4rem;
    text-align:center;
}
#Serif{
    width:90%;
    margin:0 auto 24px;
    font-size:1.8rem;
}
#Introduction{
    width:90%;
    margin:0 auto 30px;
    font-size:1.3rem;
    line-height:1.4;
}


/*============ キャラ別設定 ============*/

/* ツガイ画像 */
#KarasuHakucho #TugaiCharaImg img {margin-left:-7%;}
#HachidoriTsuru #TugaiCharaImg img {margin-left:-7%;}
#FukurouFuramingo #TugaiCharaImg img {margin-left:-13%;}
#SuzumeEnaga #TugaiCharaImg img {margin-left:-11%;}
#TsubameMozu #TugaiCharaImg img {margin-left:-8%;}
#Majo #TugaiCharaImg {margin-top:0;}
#Majo #TugaiCharaImg img{
    width:122%;
    margin-left:-11%;
}


/* キャラ */
#Karasu .CharaImg, #Hachidori .CharaImg, #Enaga .CharaImg, #Mozu .CharaImg{
    position:absolute;
    top:12px;
    left:14%;
    height:280px;
}
#Fukurou .CharaImg{
    position:absolute;
    top:12px;
    left:7%;
    height:280px;
}
#Hakucho .CharaImg, #Tsuru .CharaImg, #Suzume .CharaImg{
    position:absolute;
    top:12px;
    right:7%;
    height:280px;
}
#Furamingo .CharaImg, #Tsubame .CharaImg{
    position:absolute;
    top:12px;
    right:3%;
    height:280px;
}

#Nevi .CharaImg{
    position:absolute;
    top:31px;
    right:3%;
    height:280px;
    z-index:100;
}


/* 下部ボタン */
#BtnWrap p{
    margin-bottom:1em;
    font-size:1.6rem;
}
#BtnWrap ul#BtnBox{
    width:100%;
    margin:0 0 40px;
}
#BtnWrap li {list-style:none;}
#BtnWrap #BtnBox li a{
    display:block;
    background:#253660;
    margin-bottom:20px;
    padding:10px 2em;
    font-size:1.5rem;
    color:#fff;
    text-decoration:none;
    border-radius:6px;
}
#BtnWrap #BtnBox li a::before{
	font-family:"Font Awesome 5 Free";
    content:"\f101";
    font-weight:900;
    margin-right:8px;
}

#BtnWrap ul#BnrBox{
    width:100%;
    margin:0;
    text-align:center;
}
#BtnWrap ul#BnrBox li {margin:0 0 20px;}
#BtnWrap ul#BnrBox li a{
    display:block;
}
#BtnWrap ul#BnrBox li a img {width:100%;}
#BtnWrap ul#BnrBox li:first-of-type a img {max-width:330px;} 
#R_Contents footer .copyright{
    margin:40px auto 0;
    padding-bottom:20px;
    color:#000;
    text-shadow:none;
}

 /* 魔女 */
#Majo #BtnWrap{
    padding-top:20px;
    text-align:center;
}
#Majo #BtnWrap ul#BnrBox li:last-of-type {margin:0;}
#Majo #BtnWrap #BtnBox li a {border:1px solid #fff;}
#Majo + footer .copyright{
    background:#000;
    margin:20px 0 0;
    padding-top:20px;
    color:#fff;
    text-shadow:none;
}




}