/* ---------------------------------------
  .fv
-----------------------------------------*/
.fv {
    background: url("../img/bg_dot_pc.png") repeat center top;
    box-sizing: border-box;
}

.fv .wrap{
    position: relative;
    padding-bottom: 336px;
}

.fv h1{
    text-align: center;
}

.fv .btn{
    text-align: center;
}

.fv .movie{
    position: absolute;
    /*top:714px;*/
    left:50%;
    transform: translateX(-50%);
    width: 980px;
    z-index: 1;
    padding-top: 90px;
}

.fv .movie iframe{
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
}

@media screen and (max-width: 767px) {
    .fv {
        background-size: 32vw auto;
    }

    .fv .wrap{
        padding-bottom: 32vw;
    }

    .fv .btn{
        width: 70vw;
        margin: 2vw auto 0;
    }

    .fv .movie{
        /*top:126vw;*/
        width: 93vw;
        padding-top: 10.7vw;
    }
}

/* ひみつ */
.fv .pass {
    max-width: 1000px;
    background: #ff8e93;
    border-radius: 10px;
    padding: 20px;
    margin: 90px auto;
    text-align: center;
    font-size: 2.4em;
    color: #fff;
    font-weight: bold;
    line-height: 1.6;
}

@media screen and (max-width: 767px) {
    .fv .pass {
        max-width: 90vw;
        padding: 16px;
        margin: 10.7vw auto;
        font-size: 4.5vw;
    }
}

/* 搭載アプリ */
.fv .app .btn_box {
    max-width: 1000px;
    margin: 90px auto 0;
    padding-bottom: 24px;
}

.fv .app .btn_box .btn {
    position: relative;
    width: 430px;
    margin: 0 auto;
    padding: 24px;
    border-radius: 100px;
    border: 4px solid #FFC850;
    background: #14B7D3;
    color: #FFF;
    font-size: 2.2em;
    font-weight: bold;
    cursor: pointer;
}

.fv .app .btn_box .btn::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 10px 0 10px;
    border-color: #FFF transparent transparent transparent;
    transition: transform .4s ease;
}

.fv .app .btn_box .btn.is-open::after {
    transform: translateY(-50%) rotate(180deg);
}



@media screen and (max-width: 767px) {
    .fv .app .btn_box {
        max-width: 94vw;
        margin: 10.7vw auto 0;
        padding-bottom: 6.4vw;
    }

    .fv .app .btn_box .btn {
        position: relative;
        width: 69.3vw;
        margin: 0 auto;
        padding: 4.3vw;
        border: 3px solid #FFC850;
        font-size: 4vw;
    }

    .fv .app .btn_box .btn::after {
        right: 6.4vw;
        border-width: 10px 7.5px 0 7.5px;
    }

    .fv .app .manual_box {
        max-width: 94vw;
        margin: 0 auto 6.4vw;
        padding: 5.3vw;
    }

    .fv .app .manual_box .ttl {
        margin-bottom: 4.7vw;
        color: #000;
        font-size: 4vw;
    }

    .fv .app .manual_box .manual {
        width: 46%;
        margin: 4.2vw 2% 0;
    }

    .fv .app .manual_box .manual a img {
        width: 90%;
    }

    .fv .app .manual_box .manual .kind {
        margin-top: 4.27vw;
        font-size: 3.2vw;
    }
}

/* 充電池利用について */
.fv .battery .btn_box {
    max-width: 1000px;
    margin: 40px auto 0;
}

.fv .battery .btn_box .btn {
    display: block;
    width: 430px;
    margin: 0 auto;
    padding: 24px;
    border-radius: 100px;
    border: 4px solid #FFC850;
    background: #7EC7C4;
    color: #FFF;
    font-size: 2.2em;
    font-weight: bold;
    text-decoration: none;
}

@media screen and (max-width: 767px) {
    .fv .battery .btn_box {
        max-width: 94vw;
        margin: 0 auto;
    }

    .fv .battery .btn_box .btn {
        width: 69.3vw;
        padding: 4.3vw;
        border: 3px solid #FFC850;
        font-size: 4vw;
    }
}


/* ---------------------------------------
  #sec01
-----------------------------------------*/
#sec01{
    position: relative;
    padding: 321px 0 105px;
    background: url("../img/bg_sec01_pc.png") repeat center top 27px;
    box-sizing: border-box;
    text-align: center;
}

#sec01 .ttl{
    margin-top: 7px;
}

#sec01 .point {
    position: relative;
    background: #fdfaf5;
    border-radius: 16px;
    border:7px solid #ebd182;
    width: 826px;
    margin: 57px auto 0;
    padding: 0 0 80px;
}

#sec01 .point04 {
    border:7px solid #e2d9ec;
}

#sec01 .point + .point{
    margin-top: 23px;
}

#sec01 .point::before{
    content: "";
    position: absolute;
    top:5px;
    left:5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    border-radius: 10px;
    border:3px solid #ebd182;
}

#sec01 .point04::before{
    border:3px solid #e2d9ec;
}

#sec01 .point > *{
    position: relative;
    z-index: 1;
}

#sec01 .ttl_point {
    margin-top: -13px;
}

#sec01 .point01 > .txt_sec{
    margin-top: 26px;
}

#sec01 .ill_point01_01{
    position: absolute;
    top: -38px;
    left: 63px;
}

#sec01 .box01{
    margin-top: -34px;
}

#sec01 .box01 .txt_sec{
    margin-top: 14px;
}

#sec01 .box01 .img_box01_01{
    margin-top: 20px;
}

#sec01 .box01 .img_box01_02{
    margin-top: 50px;
}

#sec01 .box02{
    margin-top: 88px;
}

#sec01 .box02 .txt_sec{
    margin-top: 20px;
}

#sec01 .box02 .img_box02_01{
    margin-top: 23px;
}

#sec01 .box03{
    margin-top: 86px;
}

#sec01 .box03 .txt_sec{
    margin-top: 16px;
}

#sec01 .box03 .img_box03_01{
    margin-top: 16px;
}

#sec01 .box03 .img_box03_02{
    margin-top: -15px;
}

#sec01 .box04{
    margin-top: 94px;
}

#sec01 .box04 .txt_sec{
    margin-top: 20px;
}

#sec01 .box04 .img_box04_01{
    margin-top: 20px;
}

#sec01 .box04 .acc{
    margin-top: 66px;
}

#sec01 .box04 .btn_acc{
    position: relative;
    width: 480px;
    height: 64px;
    background: #ff8e93;
    border-radius: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor:pointer;
    margin: 0 auto;
    padding-right: 15px;
    transition: opacity .4s ease
}

#sec01 .box04 .btn_acc::before{
    content: "";
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    right:33px;
    background-color: #fff;
    width: 30px;
    height: 20px;
    clip-path: polygon(0 0, 100% 0%, 50% 100%);
    transition: transform .4s ease;
}

#sec01 .box04 .btn_acc:hover {
    opacity: .5;
}

@media (min-width: 1px) and (max-width: 1050px) {
    #sec01 .box04 .btn_acc:hover {
        opacity: 1;
    }
}

#sec01 .box04 .btn_acc.is-open::before{
    transform: translateY(-50%) rotate(180deg);
}

#sec01 .box04 .btn_acc img{
    width: 334px;
}

#sec01 .box04 .ctn_acc{
    margin-top: 40px;
}

#sec01 .img_box04_02 img{
    margin-bottom: -102px;
}

#sec01 .point02 .img_point02_01{
    margin-top: 6px;
}

#sec01 .point02 .txt_sec{
    margin-top: 20px;
}

#sec01 .point02 .img_point02_02{
    margin-top: 30px;
}

#sec01 .point03 .txt_sec{
    margin-top: 34px;
}

#sec01 .point03 .note_sec:not(.red){
    margin-top: 14px;
}

#sec01 .point03 .img_point03_01{
    margin-top: 3px;
}

#sec01 .point03 .note_sec.red{
    margin-top: 20px;
}

#sec01 .point04 .ttl_lead {
    margin: -7px -7px 0;
    padding: 30px 0 16px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    background: url(/brand/sumikkophone/img/ttl_sec01_point04_bg.png) repeat center top;
}

#sec01 .point04 .ttl_point {
    margin: 32px 0 16px;
}

@media screen and (max-width: 767px) {
    #sec01{
        padding: 33vw 0 18vw;
        background-size: 10vw auto;
    }

    #sec01 .img_sec01_01{
        width: 73vw;
        margin: 0 auto;
    }

    #sec01 .ttl{
        margin: 1vw auto 0;
        width: 90vw;
    }

    #sec01 .point {
        border-radius: 8px;
        border:4px solid #ebd182;
        width: 94vw;
        margin: 9.5vw auto 0;
        padding: 0 6vw 11.6vw;
    }

    #sec01 .point04 {
        border:4px solid #e2d9ec;
    }

    #sec01 .point + .point{
        margin-top: 11.5vw;
    }

    #sec01 .point::before{
        top:2px;
        left:2px;
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        border-radius: 5px;
        border:2px solid #ebd182;
    }

    #sec01 .point04::before{
        border:2px solid #e2d9ec;
    }

    #sec01 .ttl_point {
        margin: -3.5vw -1.4vw 0;
    }

    #sec01 .point01 > .txt_sec{
        margin-top: 5vw;
    }

    #sec01 .ill_point01_01{
        top: -10vw;
        left: 5vw;
        width: 8vw;
    }

    #sec01 .box01{
        margin-top: -2vw;
    }

    #sec01 .box01 .txt_sec{
        margin-top: 2vw;
    }

    #sec01 .box01 .img_box01_01{
        margin-top: 6vw;
    }

    #sec01 .box01 .img_box01_02{
        margin-top: 5.5vw;
    }

    #sec01 .box02{
        margin-top: 10vw;
    }

    #sec01 .box02 .txt_sec{
        margin-top: 2vw;
    }

    #sec01 .box02 .img_box02_01{
        margin: 3vw -1vw 0;
    }

    #sec01 .box03{
        margin-top: 10vw;
    }

    #sec01 .box03 .txt_sec{
        margin-top: 2vw;
    }

    #sec01 .box03 .img_box03_01{
        margin-top: 3vw;
    }

    #sec01 .box03 .img_box03_02{
        margin-top: 8vw;
    }

    #sec01 .box04{
        margin-top: 9vw;
    }

    #sec01 .box04 .txt_sec{
        margin-top: 2vw;
    }

    #sec01 .box04 .img_box04_01{
        margin-top: 4vw;
    }

    #sec01 .box04 .acc{
        margin-top: 9vw;
    }

    #sec01 .box04 .btn_acc{
        width: 100%;
        height: 10.6vw;
        padding-right: 3vw;
    }

    #sec01 .box04 .btn_acc::before{
        right:5.5vw;
        width: 4.9vw;
        height: 3.3vw;
    }

    #sec01 .box04 .btn_acc img{
        width: 55.6vw;
    }

    #sec01 .box04 .ctn_acc{
        margin-top: 5vw;
    }

    #sec01 .img_box04_02 img{
        margin-bottom: -15vw;
    }

    #sec01 .point02 .img_point02_01{
        margin: 2vw -3vw 0;;
    }

    #sec01 .point02 .txt_sec{
        margin-top: 6vw;
    }

    #sec01 .point02 .img_point02_02{
        margin: 6vw -2.6vw 0;
    }

    #sec01 .point03 .ttl_point{
        margin: -5.5vw -1.4vw 0;
    }

    #sec01 .point03 .txt_sec{
        margin-top: 4vw;
    }

    #sec01 .point03 .note_sec:not(.red){
        margin-top: 1vw;
    }

    #sec01 .point03 .img_point03_01{
        margin: 3.5vw -4.4vw 0;
    }

    #sec01 .point03 .note_sec.red{
        margin-top: 1vw;
    }

    #sec01 .point04 .ttl_lead {
        margin: -5px calc(-4px + -6vw) 0;
        padding: 7vw 6vw 4vw;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        background: url(/brand/sumikkophone/img/ttl_sec01_point04_bg.png) repeat center top;
        background-size: 768px auto;
    }

    #sec01 .point04 .ttl_point {
        margin: 6.4vw 0 4.2vw;
    }
}

/* ---------------------------------------
  #sec02
-----------------------------------------*/
#sec02{
    position: relative;
    padding: 120px 0 100px 0;
    background: url("../img/bg_dot_pc.png") repeat center top;
    box-sizing: border-box;
    text-align: center;
}

#sec02::before{
    content: "";
    position: absolute;
    top:-68px;
    right:0;
    width: 80px;
    height: 539px;
    background: url(../img/ill_sec02.png) no-repeat center top / contain;
}

#sec02 .box01 {
    position: relative;
    background: #fff;
    border-radius: 16px;
    border:7px solid #bce7f0;
    width: 826px;
    margin: 0 auto;
    padding: 0 0 102px;
}

#sec02 .box01::before{
    content: "";
    position: absolute;
    top:5px;
    left:5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    border-radius: 10px;
    border:3px solid #bce7f0;
}

#sec02 .box01 > *{
    position: relative;
    z-index: 1;
}

#sec02 .box01 .ttl_box01{
    position: relative;
    background: #bce7f0;
    height: 140px;
}

#sec02 .box01 .ttl_box01 img{
    position: absolute;
    top:-30px;
    left:50%;
    transform: translateX(-50%);
}

#sec02 .box01 .img_box01_01{
    margin-top: 80px;
}

#sec02 .box01 .img_box02_01{
    margin-top: 27px;
}

#sec02 .box01 .img_box02_01 + .btn{
    margin-bottom: 80px;
}

#sec02 .box01 .btn{
    margin-top: 24px;
}

#sec02 .area01{
    position: relative;
    /*margin-top: 52px;*/
    margin-top: 80px;
}

#sec02 .area01::before{
    content: "";
    position: absolute;
    /*top:18px;*/
    top: 122px;
    left:50%;
    transform: translateX(-50%);
    z-index: -1;
    width: 576px;
    height: 576px;
    background: url(../img/bg_sec02_area01_01_pc.png) no-repeat center center;
}

#sec02 .area01 .img_area01_02 {
    margin-bottom: 80px;
}

#sec02 .area01 .txt_sec{
    margin-top: -5px;
}

#sec02 .area01 .note_sec{
    margin-top: 6px;
}

#sec02 .area01 .img_area01_01{
    margin-top: 18px;
}

#sec02 .box02{
    margin-top: 50px;
}
#sec02 .box02 .btn_sec02{
    width: 512px;
    margin: 0 auto;
}

#sec02 .copy{
    text-align: center;
    color: #231815;
    font-size: 1.6rem;
}

@media screen and (max-width: 767px) {
    #sec02{
        padding: 18vw 0 30vw 0;
        background-size: 32vw auto;
    }

    #sec02::before{
        top:-11vw;
        width: 10.4vw;
        height: 71.7vw;
        z-index: 2;
    }

    #sec02 .box01 {
        border-radius: 8px;
        border:4px solid #bce7f0;
        width: 94vw;
        margin: 0 auto;
        padding: 0 0 16.5vw;
    }

    #sec02 .box01::before{
        top: 2px;
        left: 2px;
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        border-radius: 5px;
        border:2px solid #bce7f0;
    }

    #sec02 .box01 .ttl_box01{
        height: 21vw;
    }

    #sec02 .box01 .ttl_box01 img{
        top:-4vw;
        width: 66vw;
    }

    #sec02 .box01 .img_box01_01{
        margin: 10.67vw auto 0;
        width: 80.2vw;
    }

    #sec02 .box01 .img_box02_01{
        margin: 2vw auto 0;
        width: 80.2vw;
    }

    #sec02 .box01 .img_box02_01 + .btn{
        margin-bottom: 10.67vw;
    }

    #sec02 .box01 .btn{
        margin: 4.2vw auto 0;
        width: 70vw;
    }

    #sec02 .area01{
        /*margin: 2vw auto 0;*/
        margin: 10.67vw auto 0;
        width: 84vw;
    }

    #sec02 .area01::before{
        /*top:3vw;*/
        top: 17vw;
        width: 76.5vw;
        height: 76.5vw;
        background-size: contain;
    }

    #sec02 .area01 .img_area01_02 {
        margin-bottom: 10.67vw;
    }

    #sec02 .area01 .ttl_area{
        width: 76.5vw;
        margin: 0 auto;
    }

    #sec02 .area01 .txt_sec{
        margin-top: 5vw;
        text-align: center;
    }

    #sec02 .area01 .note_sec{
        margin-top: 1vw;
        text-align: center;
    }

    #sec02 .area01 .img_area01_01{
        margin: 5vw auto 0;
        width: 80vw;
    }

    #sec02 .box02{
        margin-top: 7vw;
    }

    #sec02 .box02 .btn_sec02{
        width: 94vw;
    }

    #sec02 .copy{
        font-size: 3.4vw;
    }
}

/* popup
-------------------------------*/
.mfp-bg{opacity: 0.3;}
.popup_wrap{
	width: 980px;
	padding: 137px 164px 100px;
	background-color: #fff;
	box-sizing: border-box;
	margin: 10px auto;
	position: relative;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	border-radius: 10px;
}
.popup_wrap *{
	box-sizing: border-box;
}
.popup_wrap .buylink{
	width: 100%;
	margin: 0;
}
.popup_wrap .buylink__ttl{
    display: block !important;
	text-align: center;
	line-height: 1;
	font-size: 50px;
	color: #14B7D3;
	font-weight: 800;
	margin-bottom: 60px;
}
.popup_wrap .buylink__list {
    margin: 0 auto;
}
.mfp-close-btn-in .mfp-close{opacity: 0;}
.popup-modal-dismiss{
	position: absolute;
	top: 28px;
	right: 24px;
	width: 52px;
	transition: .2s;
}
.popup-modal-dismiss img{
	width: 100%;
}

.popup_wrap .buylink__ttl-txt:before{
	display: none;
}
@media screen and (min-width: 769px) {
	.popup-modal-dismiss:hover{
		opacity: 0.65;
	}

}
@media screen and (max-width: 768px) {
	.popup_wrap{
		width: 93.6vw;
		padding: 18.4vw 8.6vw 16.8vw;
		border-radius: 5px;
	}
	.popup_wrap .buylink__ttl{
		font-size: 5.86vw;
		margin-bottom: 7.7vw;
	}
	.popup_wrap .buylink__ttl .buylink__ttl-txt{
		color: #14B7D3;
	}
	.popup-modal-dismiss{
		top: 4vw;
		right: 3.6vw;
		width: 8vw;
	}

}


/* manual-popup
-------------------------------*/
.manual-popup {
    padding: 100px 60px 60px;
    background-color: #bce7f0;
    font-family: inherit;
}

.manual-popup .manual_box .ttl {
    margin-bottom: 32px;
    color: #000;
    font-size: 2.2em;
    font-weight: bold;
    text-align: center;
}

.manual-popup .manual_box .manuals {
    display: flex;
    flex-wrap: wrap;
}

.manual-popup .manual_box .manual {
    width: 23%;
    margin: 1.4% 1% 0;
    background: #E3F5F9;
}

.manual-popup .manual_box .manual a {
    display: block;
    padding: 16px;
    text-align: center;
}

.manual-popup .manual_box .manual a:hover {
    color: #000;
    text-decoration: none;
}

.manual-popup .manual_box .manual a img {
    width: 75%;
}

.manual-popup .manual_box .manual .kind {
    margin-top: 16px;
    font-size: 1.6em;
}

@media screen and (max-width: 767px) {
    .manual-popup {
        padding: 12.4vw 5.3vw 5.3vw;
    }

    .manual-popup .manual_box .ttl {
        margin-bottom: 4.7vw;
        color: #000;
        font-size: 4vw;
    }

    .manual-popup .manual_box .manual {
        width: 46%;
        margin: 4.2vw 2% 0;
    }

    .manual-popup .manual_box .manual a img {
        width: 90%;
    }

    .manual-popup .manual_box .manual .kind {
        margin-top: 4.27vw;
        font-size: 3.2vw;
    }
}