@charset "UTF-8";
/* CSS Document */

html,body{
    font-family: 'Noto Sans JP', sans-serif;
    font-weight:bold;
    color:#fff;
    font-size:16px;
    width:100%;
}
@media screen and (max-width:768px) {
    html,body{
        font-size:14px;
    }
}
body{
    position:relative;
    padding-top:70px;
}
@media screen and (max-width:768px) {
    body{
        padding-top:64px;
    }
}
/*----------------------------
　　 common
----------------------------*/
h2 {
    margin-bottom:25px;
    text-align:center;
    font-weight:bold;
    font-size:32px;
}
@media screen and (max-width:768px) {
    h2 {
        font-size:24px;
    }
}
section {
    padding:0 20px;
}
.section_inner {
    max-width:1200px;
    margin:0 auto;
    padding:0;
}
a {
    display:inline-block;
     transition: all 0.3s;
}
a:hover {
    opacity:0.7;
    transition: all 0.3s;
}
img {
    max-width:100%;
    vertical-align:bottom;
}
.bnr-amazon {
    margin-top:20px;
}
.link-underline {
    text-decoration:underline;
}
.link-underline:hover {
    text-decoration:none;
}
/*---------------------------
　　header
----------------------------*/
.header {
    background:#00336c;
    position:fixed;
    width:100%;
    top:0;
    left:0;
    z-index:999;
    height:70px;
    padding:12px 32px 15px;
    overflow:hidden;
    display:flex;
    justify-content:flex-start;
    align-items:flex-end;
}
@media screen and (max-width:768px) {
    .header {
        height:64px;
        padding:12px 15px;
    }
}
.nihoneiganet {
    width:190px;
    font-size:0;
    text-indent:-999px;
    background:url("../img/logo.png") no-repeat center;
    background-size:contain;
    height:0;
    padding-top:43px;
    flex-shrink: 0;
}
@media screen and (max-width:768px) {
    .nihoneiganet {
        pading-top:0;
        height:46%;
        width:134px;
    }
}
.btn-share {
    margin-left:auto;
}
.btn-share a{
    letter-spacing: 0.1em;
    position:relative;
    border:2px solid #fff;
    border-radius:30px;
    padding:9px 20px 9px 28px;
    line-heght:1em;
}

@media screen and (max-width:768px) {
    header .btn-share a{
        display:block;
        border-radius:100px;
        width:40px;
        height:40px;
        background:#fff url("../img/ico_twitter.svg") no-repeat center;
        background-size:52%;
        text-indent:-999px;
        font-size:0;
        padding:0;
    }
}
.btn-share a::before {
    content:"";
    display:block;
    width:45px;
    height:45px;
    border-radius:100px;
    background:#fff url("../img/ico_twitter.svg") no-repeat center;
    background-size:52%;
    position:absolute;
    top:0;
    bottom:0;
    margin:auto;
    left:-24px;
}
@media screen and (max-width:768px) {
    header .btn-share a::before {
        display:none;
    }
}
/*---------------------------
　　main
----------------------------*/
.main {
    text-align:center;
    background:#00336c;
    padding:0 0 30px;
}
.main_sliderwrap {
    position:relative;
    padding:0 70px;
    background:#232323;
    margin-bottom:30px;
}
@media screen and (max-width:768px) {
    .main_sliderwrap {
        padding:0;
        margin-bottom:16px;
    }
}
.main_slider {
    width:100%;
    max-width:1460px;
    margin:0 auto;
}
/*slider*/
.btn-prev,
.btn-next {
    position:absolute;
    height:100%;
    width:70px;
    top:0;
    bottom:0;
    margin:auto;
    font-size:0;
}
.btn-prev {
    left:-70px;
}
.btn-next {
    right:-70px;
}
.btn-prev::before,
.btn-next::before {
    content:"";
    display:block;
    position:absolute;
    width:20px;
    height:38px;
    top:0;
    bottom:0;
    margin:auto;
}
.btn-prev::before {
    background:url("../img/sliderarrow_l.svg") no-repeat;
    background-size:contain;
    left:20px;
}
.btn-next::before {
    background:url("../img/sliderarrow_r.svg") no-repeat;
    background-size:contain;
    right:20px;
}
.slick-dots {
    position:absolute;
    left: 50%;
    transform: translate(-50%, 0);
}
@media screen and (max-width:768px) {
    .slick-dots {
        bottom:-16px;
    }
}

.slick-dots li {
    font-size:0;
    width:10px;
    height:10px;
    background:#fff;
    border-radius:10px;
    display:inline-block;
    margin:0 5px;
}
.slick-dots li.slick-active {
    opacity:0.7;
}
.slick-slide a {
    vertical-align:bottom;
    display:inline-block;
}

/*---------------------------
　　lead
----------------------------*/
.lead{
    background:#00336c;
    padding:0 20px 48px;
    text-align:center;
    font-size:24px;
}
@media screen and (max-width:768px) {
    .lead{
        font-size:18px;
        line-height:1.75em;
    }
}
/*---------------------------
　　about
----------------------------*/
.about {
    text-align:center;
    padding-bottom:64px;
    background:#00336c url(../img/bg_about.svg) no-repeat left calc(50% - 300px) top;
}
@media screen and (max-width:768px) {
    .about {
        background:#00336c url(../img/bg_about.svg) no-repeat left top;
        background-size:96%;
    }
}
.about .section_inner{
    padding:50px 0;
    background:url("../img/bg_about_top.svg") no-repeat right 32px top, url("../img/bg_about_bottom.svg") no-repeat left 32px bottom;
}
@media screen and (max-width:768px) {
    .about .section_inner{
        background:url("../img/bg_about_top_sp.svg") no-repeat right top, url("../img/bg_about_bottom_sp.svg") no-repeat left bottom;
        background-size:100px;
    }
}
.about_list {
    display:flex;
    justify-content:center;
    margin-bottom:22px;
}
@media screen and (max-width:768px) {
    .about_list {
        display:block;
    }
}
.about_list_inner {
    background:#30539c;
    border-radius:5px;
    width:50%;
    box-shadow:6px 6px 10px rgba(0,0,0,0.4);
    padding:22px;
}
@media screen and (max-width:768px) {
    .about_list_inner {
        width:100%;
        padding:16px;
        margin-bottom:15px;
    }
    .about_list_inner img{
        width:13.4%;
    }
}
.about_list_inner_p {
    font-size:20px;
    margin-top:16px;
    line-height:1.6em;
}
@media screen and (max-width:768px) {
    .about_list_inner_p {
        font-size:16px;
    }
}
.about_list_inner_p b{
    font-size:24px;
}
@media screen and (max-width:768px) {
    .about_list_inner_p b{
        font-size:20px;
    }
}
.about_list_inner_point {
    color:#f43b2b;
}
.about_list_inner:first-child {
    margin-right:32px;
}
.about_text {
    font-weight:normal;
    line-height:1.75em;
    margin-bottom:25px;
}
@media screen and (max-width:768px) {
    .about_text {
        padding:0 24px;
        text-align:left;
        line-height:1.6em;
    }
}
.about_caution {
    font-weight:normal;
    font-size:0.875em;
    line-height:1.4em;
}
@media screen and (max-width:768px) {
    .about_caution {
        font-size:12px;
        text-align:left;
        padding:0 24px;
    }
}
/*---------------------------
　　selection
----------------------------*/
.selection {
    background:#fff url("../img/bg_selection.svg") no-repeat top 67px right;
    color:#232323;
    font-size:18px;
    padding:0;
}
@media screen and (max-width:768px) {
    .selection {
        background:#fff url("../img/bg_selection.svg") no-repeat top 14px right;
        background-size:96%;
    }
}
.selection_menu {
    margin:0 auto;
    padding:0 58px;
    display:flex;
    justify-content:center;
    align-items:stretch;
    box-sizing: content-box;
}
@media screen and (max-width:1200px) {
    .selection_menu {
        padding:0 20px;
    }
}
@media screen and (max-width:768px) {
    .selection_menu {
        flex-wrap:wrap;
    }
}
.selection_menu li{
    width:25%;
    margin-right:16px;
}
@media screen and (max-width:768px) {
    .selection_menu li{
        width:46.5%;
        margin:0 0 25px;
    }
    .selection_menu li:nth-child(odd){
        margin-right:6%;
    }
}
.selection_menu li a {
    width:100%;
    border-bottom:2px #bdbdbd solid;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:22px;
    text-align:center;
    position:relative;
    line-height:1.3em;
    height:100%;
}
@media screen and (max-width:768px) {
    .selection_menu li a {
        padding:0 0 30px;
        font-size:14px;
    }
}
.selection_menu li a:last-child{
    margin-right:0;
}
.selection_menu li a::after{
    content:"";
    display:block;
    width:20px;
    height:10px;
    top:0;
    bottom:0;
    margin:auto;
    right:0;
    background:url("../img/menuarrow.svg") no-repeat center;
    background-size:contain;
    position:absolute;
}
@media screen and (max-width:768px) {
    .selection_menu li a::after{
        width:100%;
        height:7px;
        bottom:8px;
        top:auto;
    }
}
.selection h3 {
    margin:0 auto 18px;
    padding:0 58px;
    box-sizing: content-box;
    font-size:24px;
}
@media screen and (max-width:1200px) {
    .selection h3 {
        padding:0 20px;
    }
}
@media screen and (max-width:768px) {
    .selection h3 {
        font-size:16px;
    }
}
.selection .h3_inner {
    position:relative;
    display:inline-block;
    padding-left:26px;
}
@media screen and (max-width:768px) {
    .selection .h3_inner {
        padding-left:22px;
    }
}
.selection .h3_inner::before {
    content:"";
    display:block;
    width:22px;
    height:27px;
    position:absolute;
    top:0;
    bottom:0;
    margin:auto;
    left:0;
    background:url("../img/ico_triangle.svg") no-repeat;
    background-size:contain;
}
@media screen and (max-width:768px) {
    .selection .h3_inner::before {
        width:16px;
        height:19px;
    }
}
.selection_category {
    margin-top:46px;
    padding:0;
}
@media screen and (max-width:768px) {
    .selection_category {
        margin-top:28px;
    }
}
.selection .section_inner {
    max-width:none;
    padding:126px 0;
}
@media screen and (max-width:768px) {
    .selection .section_inner {
        padding:64px 0;
    }
}
.selection_set {
    position:relative;
    overflow:hidden;
}
.selection_list {
    overflow:visible;
    max-width:100%;
    margin:0 auto 0 58px;
    position:static;
}
@media screen and (max-width:1200px) {
    .selection_list {
        margin:0 auto 0 20px;
    }
}
@media screen and (max-width:768px) {
    .selection_list {
        margin-left:20px;
    }
}
.selection .slick-list.draggable {
    padding-right:3.72%;
    padding-left:0;
    overflow:visible;
}
.selectionlist_inner {
    margin-right:1vw;
    width:21.35vw;
   max-width:356px
}
@media screen and (max-width:768px) {
    .selectionlist_inner {
         margin-right:8px;
    }
}
.selectionlist_inner img{
    width:100%;
}

.selectionlist_inner > div {
    width:100%;
}
.selectionlist_inner:last-child {
}
.selectionlist_inner p{
    margin-top:14px;
    line-height:1.72em;
}
@media screen and (max-width:768px) {
    .selectionlist_inner p{
        font-size:12px;
        margin-top:10px;
        font-weight:normal;
    }
}
.selection .section_inner .slick-track {
    margin-left:0;
}
/*slider*/
.selection_btn-prev,
.selection_btn-next {
    position:absolute;
    width:3.4%;
    max-width:54px;
    top:0;
    font-size:0;
    background:rgba(0,0,0,0.2);
    z-index:200;
    display:none !important;
    /*height:javascriptで計算*/
}
.selection_btn-prev {
    left:0;
}
.selection_btn-prev[aria-disabled="false"] {
    display:inline-block !important;
}
.selection_btn-next {
    right:0;
}
.selection_btn-next[aria-disabled="false"] {
    display:inline-block !important;
}
.selection_btn-prev::before,
.selection_btn-next::before {
    content:"";
    display:block;
    position:absolute;
    width:100%;
    height:38px;
    top:0;
    bottom:0;
    margin:auto;
}
.selection_btn-prev::before {
    background:url("../img/sliderarrow_l.svg") no-repeat center;
    background-size:20px;
    left:0;
}
.selection_btn-next::before {
    background:url("../img/sliderarrow_r.svg") no-repeat center;
    background-size:20px;
    right:0;
}
.credit-hidden {
    display:none;
}
/*---------------------------
　　howto
----------------------------*/
.howto {
    background:#fff url("../img/bg_howto.svg") no-repeat left calc(50% - 280px) top;
}
@media screen and (max-width:768px) {
    .howto {
        background:#fff url("../img/bg_howto.svg") no-repeat top 14px left;
        background-size: 96%;
    }
}
.howto h2{
    color:#232323;
}
.howto .section_inner {
    padding:50px 0;
    background:url("../img/bg_howto_top.svg") no-repeat right 32px top, url("../img/bg_howto_bottom.svg") no-repeat left 32px bottom;
}
@media screen and (max-width:768px) {
    .howto .section_inner {
        background:url("../img/bg_howto_top_sp.svg") no-repeat right top, url("../img/bg_howto_bottom_sp.svg") no-repeat left bottom;
    }
}
.howto_step {
    display:flex;
}
@media screen and (max-width:768px) {
    .howto_step {
        display:block;
    }
}
.howto_step_inner {
    background:#eeeeee;
    border-radius:5px;
    box-shadow:6px 5px 10px rgba(0,0,0,0.2);
    padding:26px;
    width:384px;
    margin-right:24px;
    position:relative;
    color:#232323;
    text-align:center;
}
@media screen and (max-width:768px) {
    .howto_step_inner {
        width:100%;
        padding:15px;
        margin: 0 0 16px;
    }
}
.howto_step_inner:last-child {
     margin-right:0;
}
.howto_step_inner::after {
    position:absolute;
    content:"";
    width:47px;
    height:98px;
    top:0;
    bottom:0;
    margin:auto;
    background:url("../img/arrow.svg") no-repeat;
    background-size:contain;
    right:-9%;
    z-index:10;
}
@media screen and (max-width:768px) {
    .howto_step_inner::after {
        width:29px;
        height:58px;
        transform:rotate(90deg);
        top:auto;
        bottom:-38px;
        right:0;
        left:0;
    }
}
.howto_step_inner-3::after {
    display:none;
}
.howto_step_inner-1 img {
    width:17%;
}
.howto_step_inner-2 img {
    width:14%
}
.howto_step_inner-3 img {
    width:25%;
}
.howto_step_ttl {
    font-family: 'Barlow Condensed','Noto Sans JP', sans-serif;
    margin-bottom:15px;
    line-height:1em;
    font-size:28px;
    display:block;
    color:#00336c;
    font-style:italic;
}
@media screen and (max-width:768px) {
    .howto_step_ttl {
        font-size:20px;
    }
}
.howto_step_text {
    margin-top:18px;
    line-height:1.75em;
}
@media screen and (max-width:768px) {
    .howto_step_text {
         margin-top:14px;
    }
}
.howto_step_text b{
    font-size:22px;
}
@media screen and (max-width:768px) {
    .howto_step_text b{
        font-size:16px;
    }
}
/*--------------------------
       footer
--------------------------*/
.footer {
    margin-top:126px;
    background:#00336c;
    padding:48px 20px;
    text-align:center;
}
@media screen and (max-width:768px) {
    .footer {
        margin-top:62px;
        padding:32px 20px;
    }
}
.copyright {
    font-weight:normal;
    display:block;
    text-align:center;
}
.copyright-images {
    font-size:10px;
    margin-bottom:40px;
    text-align:left;
    line-height:1.4em;
}
@media screen and (max-width:768px) {
    .copyright-images {
        margin-bottom:30px;
    }
}
.footer .bnr-amazon {
    margin-bottom:33px;
}
@media screen and (max-width:768px) {
    .footer .bnr-amazon {
        margin-bottom:26px;
    }
}
.footer .btn-share a{
    display:inline-block;
    margin-bottom:36px;
}
@media screen and (max-width:768px) {
    .footer .btn-share a{
        margin-bottom:26px;
    }
}
.footer .bnr-jidai {
    margin-bottom:33px;
}
@media screen and (max-width:768px) {
    .footer .bnr-jidai {
        display: block;
        margin-bottom:26px;
    }
    .footer .bnr-jidai picture,
    .footer .bnr-jidai picture img {
        width: 100%;
    }
}
.floatingbnr {
    position:fixed;
    z-index:500;
    bottom:0;
    width:100%;
    text-align:center;
    margin:auto;
    display:none;
}
.floatingbnr img{
    width:1200px;
}
.contact {
	margin:20px auto 40px;
	font-weight:normal;
	padding:40px;
	line-height: 1.6em;
	border:2px solid #fff;
}
@media screen and (max-width:768px) {
	.contact {
		padding:20px;
	}
}
.contact_link {
	margin-bottom: 20px;
}
@media screen and (max-width:768px) {
	.contact_link {
	}
}
.contact_text {
	font-size:14px;
	line-height:1.6em;
}
.contact_text a{
	display:inline;
}
.notice {
	font-weight:normal;
	display:inline-block;
	margin-bottom:6px;
	font-size:10px;
	line-height: 1.4em;
}