@charset "utf-8";

@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{
    background:url("../images/bg.jpg") center top no-repeat #010101 fixed;
    font-size:1.5rem;
    color:#fff;
    line-height:1.6;
}
a{
    color:#b1faf7;
    line-height:1.1;
}
a:hover {color:#aaa;}
#Tokuten a::before, #Attention a::before{
    content:">> ";
    line-height:1;
}
#Tokuten dl a.noBefore::before {content:"";}


/* PC */
@media screen and (min-width: 641px) {

.spOnly {display:none;}


/* ヘッダーインクルード調整 */
.v2-headerMain{
    position:fixed;
    width:100%;
    z-index:10;
}


/* header */
header{
    background:linear-gradient(to right, #003f3c 0%, #50b9b5 100%);
    position:fixed;
    top:56px;
    width:100%;
    z-index:10;
}
#HeaderWrap{
    position:relative;
    width:1080px;
    margin:0 auto;
    padding:10px 0;
}
#HeaderWrap h1{
    display:flex;
    align-items:center;
    margin-left:58px;
}


/*　ハンバーガーボタン　*/
.btn-gnavi{
    display:block;
    position:absolute;
    top:4px;
    right:0;
    width:42px;
    height:42px;
    text-align:center;
    cursor:pointer;
    z-index:10;
}
.btn-gnavi span{
    display:block;
    position:absolute;
    left:6px;
    background:#fff;
    width:30px;
    height:2px ;
    transition:0.3s ease-in-out;
    z-index:50;
}
.btn-gnavi span:nth-child(1) {top:10px;}
.btn-gnavi span:nth-child(2) {top:20px;}
.btn-gnavi span:nth-child(3) {top:30px;}


/* ナビ開いてる時のボタン */
.btn-gnavi.active span:nth-child(1){
    top:16px;
    left:6px;
    transform:rotate(-45deg);
}

.btn-gnavi.active span:nth-child(2), .btn-gnavi.active span:nth-child(3){
    top:16px;
    transform:rotate(45deg);
}

#global-navi{
    position:fixed;
    top:0;
    left:0;
    text-align:center;
    width:100%;
    color:#fff;
    transform:translateY(-100%);
    transition:all 0.6s;
}

#global-navi ul{
    background:rgba(0, 0, 0, 0.9);
    width:1000px;
    margin:0 auto;
    padding:0;
    border:1px solid #50b9b5;
}

#global-navi ul li{
    width:100%;
    padding:0;
    border-bottom:1px dashed #aaa;
    list-style-type:none;
}
#global-navi ul li:last-child{
    padding-bottom:0;
    border-bottom:none;
}
#global-navi ul li:hover {background:#333;}

#global-navi ul li a{
  display:block;
  padding:1em 0;
  color:#fff;
  text-decoration:none;
}

/* このクラスを、jQueryで付与・削除する */
#global-navi.active {transform:translateY(0%);}



/* main */
main{
    background:rgba(5, 29, 28, 0.5);
    width:1000px;
    margin:0 auto;
    padding:0 40px;
}
section {padding-bottom:60px;}

#TopBox{
    display:flex;
    align-items:flex-start;
    padding:126px 0 40px;
    font-size:3.8rem;
    text-align:center;
    line-height:1.4;
}
#KeyvisuBox img {width:90%;}
#TitleWrap{
    padding:72px 0 57px 0;
    border-top:8px solid #003f3c;
    border-bottom:8px solid #003f3c;
}
#TopBox #Title{
    background:rgba(8, 79, 107, 0.7);
    width:600px;
    margin:0 0 50px;
    padding:20px;
    font-size:4.2rem;
    line-height:1.6;
    box-shadow:7px 7px 0 0 rgba(18,146, 196, 0.7);
}
#TopBox #Title span{
    display:block;
    font-size:2rem;
}


/*↓↓↓ ヘッダー画像がきたら削除 ↓↓↓*/
p.Example{
    margin:20px 0;
    padding:20px 0;
    text-align:center;
    font-size:4rem;
    border:1px solid #fff;
}
/*↑↑↑ ヘッダー画像がきたら削除 ↑↑↑*/


/* Introduction */
section h2, section p{
    position:relative;
    z-index:0;
}
section h2{
    position:relative;
    margin-bottom:16px;
    font-size:3rem;
    color:#50b9b5;
}
section h2::after{
    content:"";
    background:url("../images/triangle.png") center center no-repeat;
    width:81px;
    height:72px;
    position:absolute;
    top:-10px;
    left:-36px;
    z-index:-10;
    animation:rotation 18s linear infinite;
}
section h2 span{
    display:inline-block;
    margin-left:1em;
    font-size:2rem;
    color:#faee93;
}


/* 特典 */
#Tokuten dl{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:baseline;
    flex-wrap:wrap;
    width:100%;
}
#Tokuten dt{
    width:18%;
    margin-bottom:18px;
    padding:4px 1em;
    border:2px solid #50b9b5;
}
#Tokuten dd{
    width:76%;
    margin:0 0 18px 2%;
}
.BorderBtm{
    margin-bottom:12px;
    padding-bottom:12px;
    border-bottom:1px dashed #999;
}
#Tokuten .BookTit{
    margin-bottom:6px;
    font-size:1.6rem;
    color:#fdb1D2;
    line-height:1.5;
}
.Attention{
    font-size:14px;
    color:#fdb1d2;
}
.AttentionBox{
    display:block;
    margin-bottom:4px;
    padding:3px 1em;
    font-size:1.6rem;
    color:#fdb1d2;
    border:1px solid #fdb1d2;
}
.ExclamationWrap{
    width:90%;
    margin:20px auto 50px;
    border:2px solid #50b9b5;
    box-sizing:border-box;    
}
.ExclamationBox p {padding:1em;}
.ExclamationBox p.ExclamationTit{
    display:block;
    background:#50b9b5;
    margin-bottom:4px;
    padding:10px 1em;
    font-size:2rem;
    font-weight:bold;
    color:#000;
    line-height:1;
}
.ExclamationTit::before{
 	font-family:"Font Awesome 5 Free";
    content:"\f071";
    display:inline-flex;
    top:13px;
    margin-right:6px;
    font-size:3rem;
    color:#dfda44;
    vertical-align:middle;
}
#Tokuten .ExclamationBox dl{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:baseline;
    flex-wrap:wrap;
    width:90%;
    margin:12px auto 0;
}
#Tokuten .ExclamationBox dt{
    background:rgba(0, 0, 0, 0.4);
    width:12%;
    margin-bottom:18px;
    padding:4px 1em;
    color:#50b9b5;
    text-align:center;
    border:1px solid #50b9b5;
    box-sizing:border-box;
}
#Tokuten .ExclamationBox dd{
    width:36%;
    margin:0 0 18px;
    padding:4px 1em;
    color:#50b9b5;
    box-sizing:border-box;
}


/* クイズ */
#ExerciseBox{
    margin:0 auto;
    padding:30px 30px 0;
    text-align:center;
}
.TrainingWrap{
    position:relative;
    width:90%;
    margin:0 auto;
    padding:40px 50px;
    border:6px double #50b9b5;
    box-sizing:border-box;
}
.TrainingBox {margin-bottom:40px;}
.TrainingTit{
    background:#50b9b5;
    margin:0;
    padding:4px 0;
    font-size:2.6rem;
    font-weight:bold;
    color:#fff;
    letter-spacing:0.4em;
}
.TrainingImg{
    border:2px solid #50b9b5;
    box-sizing:border-box;
}
.TrainingImg img{
    width:100%;
    vertical-align:bottom;
}

#HintWrap {margin:20px auto;}
.HintBtn{
    width:70%;
    margin:50px auto 0;
}
.HintBtn a{
    display:block;
    background:#e53980;
    padding:10px 2em;
    font-size:2rem;
    color:#fff;
    text-decoration:none;
    transition:0.4s;
    cursor:pointer;
}
.HintBtn a::before{
    content:">>";
    margin-right:6px;
}
.HintBtn a:hover{
    background:#faee93;
    color:#010101;
}
#HintBox{
    display:none;
    width:80%;
    height:auto;
    margin:0 auto;
    text-align:center;
}

#HintLink{
    position:absolute;
    bottom:380px;
    width:1px;
    height:1px;
}
.q_text {margin-bottom:10px;}
input{
    padding:0 2em;
    font-size:1.8rem;
}
input:first-of-type{
    width:70%;
    margin:0 auto 10px;
    padding:7px;
    font-size:2rem;
    box-sizing:border-box;
}

#all-answers-container {
  margin-top: 2em;
}


/* 注意事項 */
#Attention p {margin-bottom:1em;}


/* footer */
footer{
    background:rgba(5, 29, 28, 0.5);
    width:1000px;
    margin:0 auto;
    padding:0 40px 40px;
    font-size:1.2rem;
    text-align:center;
}
footer #Creative{
    width:400px;
    margin:0 auto 2em;
    padding:12px 36px;
    font-size:1.5rem;
    text-align:left;
    border:1px solid #999;
}
footer ul{
    display:flex;
    align-items:center;
    width:100%;
}
footer li{
    width:calc(100% / 2 - 40px);
    margin:0 20px 30px;
    font-size:1.6rem;
    list-style:none;
}
footer li a{
    display:block;
    background:rgba(0, 0, 0, 0.6);
    padding:0.8em 1em;
    border:1px solid #b1faf7;
    border-radius:30px;
    text-decoration:none;
    transition:0.6s;
}
footer li a::before{
    content:">>";
    margin-right:5px;
}
footer li a:hover{
    background:rgba(119, 119, 119, 0.6);
    color:#b1faf7;
    border:1px solid #b1faf7;
}



}

@keyframes rotation{
    0% {transform:rotate(0);}
    100% {transform:rotate(360deg);}
}



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

.pcOnly {display:none;}


/* ヘッダーインクルード調整 */
.v2-headerMainContentLogo img {width:100px;}
.v2-headerMainContent p.onlineshop{
    padding:4px 52px 0 0;
    box-sizing:border-box;
}


/* header */
header {background:linear-gradient(to right, #003f3c 0%, #50b9b5 100%);}
#HeaderWrap{
    width:100%;
    margin:0 auto 12px;
    padding:0;
}
#HeaderWrap h1{
    display:flex;
    align-items:center;
    width:90%;
    height:48px;
    margin:0 auto;
    line-height:1;
}
#HeaderWrap h1 img {width:100%;}
#wrapper{
    position:relative;
    z-index:50;
}

/* ハンバーガーメニュー */
.btn-gnavi{
    display:block;
    position:fixed;
    top:4px;
    right:0;
    background:#335fab;
    width:42px;
    height:42px;
    text-align:center;
    cursor:pointer;
    z-index:10;
}
.btn-gnavi span{
    display:block;
    position:absolute;
    left:6px;
    background:#fff;
    width:30px;
    height:2px ;
    transition:0.3s ease-in-out;
    z-index:50;
}
.btn-gnavi span:nth-child(1) {top:10px;}
.btn-gnavi span:nth-child(2) {top:20px;}
.btn-gnavi span:nth-child(3) {top:30px;}


/* ナビ開いてる時のボタン */
.btn-gnavi.active span:nth-child(1){
    top:16px;
    left:6px;
    transform:rotate(-45deg);
}

.btn-gnavi.active span:nth-child(2), .btn-gnavi.active span:nth-child(3){
    top:16px;
    transform:rotate(45deg);
}

#global-navi{
    position:fixed;
    top:0;
    left:0;
    text-align:center;
    width:100%;
    color:#fff;
    transform:translateX(100%);
    transition:all 0.6s;
}

#global-navi ul{
    background:rgba(0, 0, 0, 0.9);
    width:90%;
    margin:0 0 0 10%;
    padding:0;
    border:1px solid #50b9b5;
}

#global-navi ul li{
    width:100%;
    padding:0;
    border-bottom:1px dashed #aaa;
    list-style-type:none;
}
#global-navi ul li:first-of-type{
    margin-top:47px;
    border-top:1px dashed #aaa;
}
#global-navi ul li:last-child{
    padding-bottom:0;
    border-bottom:none;
}
#global-navi ul li:hover {background:#333;}

#global-navi ul li a{
  display:block;
  padding:1em 0;
  color:#fff;
  text-decoration:none;
}

/* このクラスを、jQueryで付与・削除する */
#global-navi.active {transform:translateY(0%);}


/* main */
main{
    background:rgba(5, 29, 28, 0.5);
    width:90%;
    margin:0 auto;
    font-size:1.4rem;
}
section {margin-bottom:40px;}

#TopBox{
    padding:0;
    font-size:2.2rem;
    text-align:center;
    line-height:1.4;
}
#KeyvisuBox img{
    width:90%;
    border:1px solid #000;
    box-sizing:border-box;
    box-shadow:2px 2px 0 0 #000;
}
#TitleWrap {padding:8px 0;}
#TopBox #Title{
    background:rgba(8, 79, 107, 0.7);
    margin:0 0 18px -2px;
    padding:12px 8px 8px;
    font-size:2rem;
    line-height:1.6;
    box-shadow:4px 4px 0 0 rgba(18,146, 196, 0.7);
}
#TopBox #Title span{
    display:block;
    font-size:1.3rem;
    line-height:1.4;
}
#TitleWrap img {width:100%;}


/*↓↓↓ ヘッダー画像がきたら削除 ↓↓↓*/
p.Example{
    margin:20px 0;
    padding:20px 0;
    text-align:center;
    font-size:4rem;
    border:1px solid #fff;
}
/*↑↑↑ ヘッダー画像がきたら削除 ↑↑↑*/


/* Introduction */
section h2, section p{
    position:relative;
    z-index:0;
}
section h2{
    position:relative;
    margin-bottom:16px;
    font-size:2rem;
    color:#50b9b5;
    text-align:center;
}
section h2::after{
    content:"";
    background:url("../images/triangle.png") center center no-repeat;
    width:81px;
    height:72px;
    position:absolute;
    top:-18px;
    left:35%;
    z-index:-10;
    animation:rotation 18s linear infinite;
}
section h2 span{
    display:block;
    font-size:1.4rem;
    color:#faee93;
    text-align:left;
    line-height:1.4;
}


/* 特典 */
#Tokuten dl{
    position:relative;
    width:100%;
    font-size:1.3rem;
    z-index:10;
}
#Tokuten dt{
    width:100%;
    margin-bottom:8px;
    padding:4px 1em;
    border:2px solid #50b9b5;
    box-sizing:border-box;
}
#Tokuten dd .BookTit br {display:none;}
#Tokuten dd{
    width:100%;
    margin:0 0 18px;
}
.BorderBtm{
    margin-bottom:12px;
    padding-bottom:12px;
    border-bottom:1px dashed #999;
}
#Tokuten .BookTit{
    margin-bottom:6px;
    font-size:1.4rem;
    color:#fdb1D2;
    line-height:1.5;
}
.BorderBtm a{
    display:inline-block;
    margin-top:6px;
}
.Attention{
    font-size:1.3rem;
    color:#fdb1d2;
}
.AttentionBox{
    display:block;
    margin-bottom:4px;
    padding:3px 1em;
    font-size:1.4rem;
    color:#fdb1d2;
    border:1px solid #fdb1d2;
}
.ExclamationWrap{
    width:100%;
    margin:20px 0 30px;
    font-size:1.3rem;
    border:2px solid #50b9b5;
    box-sizing:border-box;    
}
.ExclamationBox p {padding:1em;}
.ExclamationBox p.ExclamationTit{
    display:block;
    background:#50b9b5;
    margin-bottom:4px;
    padding:10px 1em;
    font-size:1.8rem;
    font-weight:bold;
    color:#000;
    line-height:1;
}
.ExclamationTit::before{
 	font-family:"Font Awesome 5 Free";
    content:"\f071";
    display:inline-flex;
    top:13px;
    margin-right:6px;
    font-size:3rem;
    color:#dfda44;
    vertical-align:middle;
}
#Tokuten .ExclamationBox dl{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:baseline;
    flex-wrap:wrap;
    width:90%;
    margin:0 auto;
}
#Tokuten .ExclamationBox dt{
    background:rgba(0, 0, 0, 0.4);
    width:40%;
    margin-bottom:10px;
    padding:4px 1em;
    color:#50b9b5;
    text-align:center;
    border:1px solid #50b9b5;
    box-sizing:border-box;
}
#Tokuten .ExclamationBox dd{
    width:56%;
    margin:0 0 10px;
    padding:4px 1em;
    color:#50b9b5;
    box-sizing:border-box;
}


/* クイズ */
#ExerciseBox{
    position:relative;
    width:100%;
    margin:0;
    text-align:center;
    z-index:30;
}

.TrainingWrap{
    width:100%;
    margin:0;
    padding:10px;
    border:6px double #50b9b5;
    box-sizing:border-box;
}
.TrainingBox {margin-bottom:20px;}
.TrainingTit{
    background:#50b9b5;
    margin:0;
    padding:2px 0;
    font-size:1.8rem;
    font-weight:bold;
    color:#fff;
    letter-spacing:0.4em;
}
.TrainingImg{
    border:2px solid #50b9b5;
    box-sizing:border-box;
}
.TrainingImg img{
    width:100%;
    vertical-align:bottom;
}

#HintWrap{
    margin:20px auto;
}
.HintBtn{
    display:inline-block;
    background:#fff;
    width:70%;
    margin:10px auto 0;
    color:#000;
    text-decoration:none;
    cursor:pointer;
}
.HintBtn a{
    display:block;
    background:#e53980;
    padding:8px 2em;
    color:#fff;
    text-decoration:none;
}
.HintBtn a::before{
    content:">>";
    margin-right:6px;
}
#HintBox{
    display:none;
    width:80%;
    height:auto;
    margin:0 auto;
    text-align:center;
}

.q_text {margin-bottom:10px;}
input{
    padding:4px 2em;
    font-size:1.4rem;
}
input:first-of-type{
    width:90%;
    margin:0 auto 10px;
    padding:7px;
    font-size:1.6rem;
    box-sizing:border-box;
}

.form {margin-bottom:6px;}

#all-answers-container {margin-top:2em;}


/* 注意事項 */
#Attention p {margin-bottom:1em;}


/* footer */
footer{
    width:90%;
    margin:0 auto 20px;
    font-size:1.2rem;
    text-align:center;
}
footer #Creative{
    width:100%;
    margin:0 0 2em;
    padding:12px;
    font-size:1.3rem;
    text-align:left;
    border:1px solid #999;
    box-sizing:border-box;
}
footer ul {width:100%;}
footer li{
    width:80%;
    margin:0 auto 14px;
    font-size:1.4rem;
    list-style:none;
}
footer li a{
    display:block;
    background:rgba(0, 0, 0, 0.6);
    padding:0.4em 1em;
    border:1px solid #b1faf7;
    border-radius:30px;
    text-decoration:none;
}
footer li a::before{
    content:">>";
    margin-right:5px;
}



}



/* topへ戻る */

#footerGroup #totop{
    width:40px;
    height:40px;
    padding:0;
    text-indent:-9999px;
    background-color:#0079c7;
    border-radius:100%;
    position:fixed;
    bottom:10px;
    right:0;
    z-index:800;
    display:none;
    cursor:pointer;
}
#footerGroup #totop a {display:block;}
#footerGroup #totop::after{
    content:"\f106";
	font-family:"Font Awesome 5 Free";
    font-size:40px;
    font-weight:900;
    line-height:35px;
    text-indent:0;
    text-align:center;
    color:#fff;
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
}