@charset "UTF-8";

/*--------------------------------
reset
--------------------------------*/
html,body,div,p,img,iframe,a,span,blockquote,q,address,cite,
pre,code,em,small,strong,b,i,
header,article,section,nav,figure,figcaption,hgroup,menu,aside,footer,time,
h1,h2,h3,h4,h5,h6,
ul,ol,li,dl,dt,dd,
table,tbody,thead,tfoot,th,tr,td,
form,fieldset,legend,label,select,input,textarea,button{
    margin: 0;
    padding: 0;
    border: 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: baseline;
}
header,article,section,nav,figure,figcaption,hgroup,menu,aside,footer{
    display: block;
}
ul li{
    list-style-type: none;
}
h1,h2,h3,h4,h5,h6{
    font-weight: 500;
}
body{
    line-height: 1;
}
a{
    text-decoration: none;
}
img{
    vertical-align: middle;
}
table{
    border-collapse: collapse;
    border-spacing: 0;
}
select,option,input:not([type=checkbox]):not([type=radio]),textarea,button{
    font: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
}
blockquote::before,blockquote::after,q::before,q::after{
    content: '';
    content: none;
}
[type=submit],[type=button],[type=reset],[type=file],button{
    cursor: pointer;
}
:focus{
    outline: none;
}

/*--------------------------------
base
--------------------------------*/
html, body, .wrap, .hero{
    min-height: 100svh;
}
body{
    background: url(../images/bg.webp);
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #000;
}
h2,h3,h4,h5,h6{
    line-height: 1.3;
    font-weight: bold;
}
a{
    color: #29bbff;
}
img{
    max-width: 100%;
    height: auto;
}
.wrap{
    margin: auto;
    max-width: 500px;
    background: #223a70;
    position: relative;
    overflow: hidden;
}
.hero .btn::before,
.hero .btn::after,
.list .info .btn::after,
.list .review-btn::after{
    margin: auto;
    content: "";
    position: absolute;
}

/*--------------------------------
contents
--------------------------------*/
.hero,
.list{
    padding: 4% 4% 0;
    position: relative;
}
.hero .pr-text,
.list .pr-text{
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 12px;
    color: white;
}
.hero .h1,
.hero .h2,
.list .h1{
    margin-bottom: 4%;
}
.list .h2{
    margin-bottom: 6%;
}
.hero .btn.reunion::before{
    background: url(../images/reunion-deco.webp) no-repeat top center / contain;
}
.hero .btn.tblove::before{
    background: url(../images/tblove-deco.webp) no-repeat center / contain;
}
.hero .btn.love::before{
    background: url(../images/love-deco.webp) no-repeat center / contain;
}
.hero{
    display: flex;
    flex-direction: column;
}
.hero .hero-btm{
    margin: 0 0 4%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}
.hero .btn-box{
    padding: 0 6%;
}
.hero .btn{
    margin-bottom: 5%;
    padding: 3% 16% 3% 6%;
    display: block;
    background: white;
    border-radius: 300px;
    position: relative;
}
.hero .btn::before{
    width: 23%;
    height: 53%;
    top: -19%;
    left: -9%;
}
.hero .btn::after{
    width: 16px;
    height: 16px;
    border-top: solid 2px;
    border-right: solid 2px;
    transform: rotate(45deg);
    top: 0;
    right: 7.6%;
    bottom: 0;
}
.hero .btn:last-child{
    margin-bottom: 0;
}
.list .item-wrap{
    margin-bottom: 8%;
    padding: 0 2%;
    position: relative;
}
.list .item-wrap::before{
    width: 80px;
    height: 40px;
    top: -12px;
    right: -6%;
    z-index: 1;
}
.list .item{
    border-radius: 16px;
    overflow: hidden;
}
.list .item .name{
    padding: 2%;
    display: flex;
    border: solid;
    border-width: 0 0 4px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}
.list .name .name-box{
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
}
.list .name .name-inner{
    padding: 0 26px;
    display: inline-block;
}
.list .item .heading{
    display: block;
    position: relative;
}
.list .item .heading img{
    width: 100%;
}
.list .item .app-icon{
    margin-right: 2%;
    width: 14%;
    border-radius: 8px;
    overflow: hidden;
}
.list .item .item-inner{
    padding: 4%;
}
.list .note{
    margin-bottom: 4%;
    padding: 4%;
    border-radius: 8px;
}
.list .note.skill{
    text-align: center;
}
.list .note.skill .h4{
    margin-bottom: 2%;
    padding: 1.5%;
    border: solid 1px;
    border-radius: 100px;
    font-weight: normal;
}
.list .prof{
    padding-bottom: 1px;
    background-image: linear-gradient(180deg, #ccc 1px, transparent 1px);
    background-size: 100% 2em;
    line-height: 2em;
}
.list .info{
    display: flex;
    justify-content: center;
    align-items: center;
}
.list .info .left{
    margin-right: 2%;
    width: 30%;
    border: solid 2px white;
    border-radius: 16px;
    overflow: hidden;
}
.list .info .right{
    width: 71%;
}
.list .info .balloon{
    margin-bottom: 2%;
}
.list .info .btn{
    padding: 4%;
    display: block;
    background: url(../images/btn-bg.webp) no-repeat center / cover;
    border: solid 2px white;
    border-radius: 100px;
    position: relative;
}
.list .review{
    margin-top: 6%;
    padding: 9% 0;
    height: 0;
    position: relative;
}
.list .review.active{
    padding: 9% 0 0;
    height: auto;
}
.list .review-btn{
    padding: 5% 10% 5% 5%;
    display: block;
    background: white;
    border: solid 2px #1a1a1a;
    border-radius: 500px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    cursor: pointer;
}
.list .review .review-btn::after{
    width: 4%;
    height: 22%;
    border-top: solid 2px #1a1a1a;
    border-right: solid 2px #1a1a1a;
    transform: rotate(135deg);
    top: -10%;
    right: 5%;
    bottom: 0;
}
.list .review.active .review-btn::after{
    transform: rotate(-45deg);
    top: 0;
    bottom: -10%;
}
.list .review-btn img{
    width: 40%;
}
.list .swiper-container{
    border: solid 2px #1a1a1a;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
    position: relative;
    z-index: 0;
    transform-origin: top;
    transform: scaleY(0);
}
.list .swiper-container.active{
    transform: scaleY(1);
}
.list .swiper-slide{
    padding: 11% 4%;
    height: auto;
    background-image: url(../images/review/bg1.webp);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    position: relative;
}
.list .swiper-pagination{
    position: absolute;
    bottom: 2%;
}
.hero .btn.reunion{
    border: solid 4px #7cc47f;
}
.hero .btn.reunion::after{
    border-color: #5bab5d;
}
.list.reunion .item{
    background: #5c935e;
    border: solid 4px #7cc47f;
}
.list.reunion .name{
    background: #f7fff8;
    border-color: #7cc37f;
    color: #3e8641;
}
.list.reunion .name .name-inner{
    background: url(../images/reunion-name-L.webp) no-repeat center left / 23px, url(../images/reunion-name-R.webp) no-repeat center right / 23px;
}
.list.reunion .note{
    background: url(../images/reunion-text-bg.webp) no-repeat top 4% right 4% / 50%, #f7fff8;
}
.list .note.skill{
    background: #f7fff8;
}
.list.reunion .review-btn{
    border: solid 2px #7cc47f;
}
.list.reunion .review .review-btn::after{
    border-top: solid 2px #5bab5d;
    border-right: solid 2px #5bab5d;
}
.list.reunion .swiper-container{
    border: solid 2px #7cc47f;
}
.list.reunion .swiper-pagination .swiper-pagination-bullet-active{
    background: #7cc47f;
}
.hero .btn.tblove{
    border: solid 4px #c5b07d;
}
.hero .btn.tblove::after{
    border-color: #ab935b;
}
.list.tblove .item{
    background: #94835d;
    border: solid 4px #c5b07d;
}
.list.tblove .name{
    background: #fffdf7;
    border-color: #c5b07d;
    color: #87713e;
}
.list.tblove .name .name-inner{
    background: url(../images/tblove-name-L.webp) no-repeat center left / 23px, url(../images/tblove-name-R.webp) no-repeat center right / 23px;
}
.list.tblove .note{
    background: url(../images/tblove-text-bg.webp) no-repeat top 4% right 4% / 50%, #fffdf7;
}
.list.tblove .note.skill{
    background: #fffdf7;
}
.list.tblove .review-btn{
    border: solid 2px #c5b07d;
}
.list.tblove .review .review-btn::after{
    border-top: solid 2px #ab935b;
    border-right: solid 2px #ab935b;
}
.list.tblove .swiper-container{
    border: solid 2px #c5b07d;
}
.list.tblove .swiper-pagination .swiper-pagination-bullet-active{
    background: #c5b07d;
}
.hero .btn.love{
    border: solid 4px #c47c99;
}
.hero .btn.love::after{
    border-color: #ab5b7b;
}
.list.love .item{
    background: #945d73;
    border: solid 4px #c47c99;
}
.list.love .name{
    background: #fff7fa;
    border-color: #c07a96;
    color: #873e5b;
}
.list.love .name .name-inner{
    background: url(../images/love-name-L.webp) no-repeat center left / 23px, url(../images/love-name-R.webp) no-repeat center right / 23px;
}
.list.love .note{
    background: url(../images/love-text-bg.webp) no-repeat top 4% right 4% / 50%, #fff7fa;
}
.list.love .note.skill{
    background: #fff7fa;
}
.list.love .review-btn{
    border: solid 2px #c47c99;
}
.list.love .review .review-btn::after{
    border-top: solid 2px #ab5b7b;
    border-right: solid 2px #ab5b7b;
}
.list.love .swiper-container{
    border: solid 2px #c47c99;
}
.list.love .swiper-pagination .swiper-pagination-bullet-active{
    background: #c47c99;
}
.app-list{
    padding: 4% 6% 2%;
}
.app-list .h2{
    margin-bottom: 5%;
}
.app-list .ul {
    margin-bottom: 5%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3%;
}
.app-list .li{
    margin-bottom: 3%;
    width: 31%;
    background: #ffffff;
    border: solid 2px white;
    border-radius: 8px;
    overflow: hidden;
}
.app-list .li a{
    display: block;
}
.app-list .img-box{
    margin: 8% 4%;
    border-radius: 8px;
    overflow: hidden;
}
.app-list .img-box img{
    width: 100%;
}
.app-list .h3{
    margin-bottom: 4%;
    padding: 4%;
    background: #355294;
    text-align: center;
    font-size: 14px;
    font-weight: normal;
    color: #ffffff;
}
.app-list .btn{
    margin: 8% 4% 4%;
    padding: 4%;
    background: url(../images/btn-bg.webp) no-repeat center / cover;
    border-radius: 100px;
    text-shadow: 0 0 4px #26002e, 0 0 4px #26002e, 0 0 4px #26002e, 0 0 4px #26002e, 0 0 4px #26002e, 0 0 4px #26002e;
    text-align: center;
    font-size: 14px;
    color: white;
}
.banner{
    padding: 0 6% 6%;
    text-align: center;
    color: white;
}
.hero + .banner{
    padding: 2% 6% 6%;
}
.banner p{
    margin-bottom: 2%;
}
.footer{
    padding: 8px;
    min-height: 36px;
    width: 100%;
    background: #1a1a1a;
    position: relative;
    z-index: 1;
}
.footer .text{
    font-size: 14px;
    text-align: center;
    color: white;
}