@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／固定
========================================*/
body {font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;}


/*===== FontSize 早見表(必要なもののみ残す) 　※ 16pxは1remで記載 ※ =====*/
html {
    --12px:calc(12 / 16 * 1rem);
    --13px:calc(13 / 16 * 1rem);
    --14px:calc(14 / 16 * 1rem);
    --15px:calc(15 / 16 * 1rem);
    --20px:calc(20 / 16 * 1rem);
    --24px:calc(24 / 16 * 1rem);
    --30px:calc(30 / 16 * 1rem);
}


/* topへ戻る */
footer #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;
}
footer #totop a {display:block;}
footer #totop::after{
    content:"\f106";
    font-family:"FontAwesome";
    font-size:40px;
    line-height:35px;
    text-indent:0;
    text-align:center;
    color:#fff;
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
}



/*========================================
 カスタム用 ／PC&SP
========================================*/

/*
黄色
#ffe100
水色
#3abde8
グレー
#e6e6e6
*/

body {
    font-family: 'Noto Sans JP', sans-serif;
    background-color: #f9fafb;
    color: #000; 
    margin: 0;
}
main {
    max-width: 1080px;
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 
}
img {
    max-width: 100%;
    height: auto;
}
a {
    color: #2563eb;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
section {
    padding: 3rem; 
}
.note {
    margin: 0 auto;
    font-size: 0.875rem;
    line-height: 1.6;
}
.copy {
    margin: 1rem auto;
}
.movie {
    margin-bottom: 4rem;
}

/* --- top --- */
.top {
    padding: 0;
}
.topImage {
    width: 100%;
}

/* --- info --- */
.infoGrid {
    max-width: 900px;
    display: grid;
    grid-template-columns: auto 50%;
    gap:0 4rem; 
    align-items: center;
/*    grid-template-areas:
        "movie text"
        "movie app";*/
    grid-template-areas:
        "movie text"
        "movie text";
}
.infoTextContainer {
    grid-area: text;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.infoTextContainer > * + * {
     margin-top: 1.5rem; 
}
.infoText {
    padding: 1.8rem 2rem 2rem;
    font-size: 1.1rem;
    text-align: center;
    border: 3px solid #ffe100;
    box-shadow: 4px 4px #3abde8
}
.infoTitle {
    margin-bottom: 1.5rem;
    font-size: 1.875rem;; 
    font-weight: 900;
}
.description {
    line-height: 1.625; 
}
.appRelease {
    display: inline-block;
    margin: 1rem auto 2rem;
    padding: 0 .5em;
    font-size: 1.2rem;
    line-height: 1.6;
    font-weight: bold;
    color: #fff;
    background: #000000;
}

/* YouTube */
.aspect-video-container {
    grid-area: movie;
    position: relative;
    width: 100%;
    padding-bottom: 177.77%;
    border-radius: 0.5rem; 
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); 
}
.aspect-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* アプリ */
.appDownload {
    width: 100%;
    grid-area: app;
    background-color: #f9fafb;
    padding: 1.5rem;
}
.appDownload p {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    text-align: center;
}
.appLinks {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 2rem;
}
.appLinkItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.appLinkItem img {
    border-radius: 0.375rem;
}
.qrCode {
    width: 90px;
    height: 90px;
}

/* バナー */
.banner {
    margin-top: 3rem;
    text-align: center;
}
.banner img {
    max-width: 800px;
    width: 100%;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* --- 見出し --- */
.sectionTitle {
    text-align: center;
    margin-bottom: 2rem;
    padding: 0.5em 1em;
    font-weight: 900;
    box-shadow: 6px -6px #000;
    outline: 3px solid #fff;
    border: 3px solid #000;
}
.howToSection .sectionTitle {
    max-width: 900px;
    outline: 3px solid #3abde8;
}

/* --- howto --- */
.howToSection {
    margin-bottom: 3rem;
    background-color: #3abde8;
}
.howToGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    padding: 0;
    text-align: center;
    list-style: none;
    font-size: 1.4rem;
}
.howToGrid li {
    margin-bottom: 2rem;
}
.howToGrid li > * + * {
    margin-top: 0.75rem;
}
.howToGrid p {
    font-weight: 600;
}
.howToGrid img {
    width: 100%;
}
.howToImg {
    margin: 0 auto;
    max-width: 900px;
}
.howToImg img {
    border-radius: 10px;
}


/* ---　案内情報 --- */
.boxContent {
    max-width: 900px;
    margin: 0 auto 4rem;
    font-size: 1rem;
    line-height: 1.6;
}
.boxContent:last-child {
    margin-bottom:0;
}
.boxTitle {
    padding-left: .8rem;
    border-left: 5px solid #3abde8;
    font-size: 1.5rem;
    font-weight: bold;
}
.boxText {
    margin: 2rem auto;
    font-size: 1.2rem;
    text-align: center;
}
.boxText span {
    padding: 0 1rem;
    background: linear-gradient(transparent 60%, #ffe100 60%);
}

/* 商品 */
.productLIst {
    margin-bottom: 4rem;
    padding: 0;
    display: flex;
    list-style: none;
    flex-wrap: wrap;
    width: 100%;
    gap: 2rem;
}
.productItem {
    margin: 0;
    width: calc((100% - 2rem) / 2);
}
.productThumb {
    width: 100%;
    height: auto;
    margin-bottom:1em;
    border:1px solid #ededed;
}
.productTitle {
    margin-bottom: .5em;
    font-weight:bold;
}
.productPrice {
    color: #3abde8;
}

/* 表 */
.dataTitle {
    margin: 2rem auto;
    padding: .4rem;
    font-size: 1.2rem;
    border-bottom: 3px dotted #3abde8;
}
.dataImg {
    margin: 2rem auto;
    max-width: 600px;
}
.dataImg img {
    border: 1px solid #ededed;
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.dataList {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    font-size: .85rem;
    border-top: 1px solid #ddd;
    align-content: space-around;
}
.dataCap {
    position: relative;
    padding: .5em 1em;
    width: 15em;
    border-bottom: 1px solid #ffffff;
    line-height: 1.6;
    display: flex;
    align-items: center;
    background:#3abde8;
}
.dataText {
    margin: 0;
    padding: .8em;
    line-height: 1.6;
    width: calc(100% - 15em);
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
}


/* --- FAQ --- */
.accordion {
    margin: 2rem auto;
}
.details {
    border-top: 1px solid #3abde8;
}
.details:last-child {
    border-bottom: 1px solid #3abde8;
}
.summary {
    position: relative;
    display: block;
    /* display: list-item;以外の指定 デフォルトの三角形を削除 */
    padding: 1em;
    font-weight:bold;
}
.summary::-webkit-details-marker {
    display: none; /* Safari用 */
}
.box {
    overflow: hidden; 
}
.boxInner {
    padding: 0 3em 2em;
}
.icon::after {
    position: absolute;
    content: "\f067";
    font-family: FontAwesome;
    font-weight: 900;
    font-size: 1rem;
    top: 50%;
    right:1em;
    transform: translateY(-50%);
     transition: transform 0.3s;
}
details[open] .icon::after {
    content: "\f068";
    transform: translateY(-50%) rotate(180deg);
}


/* --- 環境 --- */
.envList > * + * {
    margin-top: 1rem;
}
.envList dt {
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.envList dd {
    margin-left: 1rem;
}
.envList ul {
    list-style: none;
    padding-left: 0;
}
.envList ul > * + * {
    margin-top: 0.25rem; 
}


/* --- footer --- */
.footer {
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.6;
    padding: 1.5rem 0; /* py-6 */
}


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

}

/* スマホ */
@media screen and (max-width: 767px) {
    .pc {
        display: none;
    }
    section {
        margin: 0 auto 3rem;
        padding: 1.2rem;
    }
    .infoTitle {
        font-size: 1.5rem;
    }
    /*top*/
    .top {
        margin: 0 auto;
    }
    .infoText {
        padding: 1.5rem 1.2rem;
    }
    .note {
        text-align: left;
        font-size: .75rem;
    }
    .appLinks {
        gap: 1rem;
    }
    .appDownload p {
        margin-bottom: 1rem;
    }
    .infoGrid {
        grid-template-columns: auto;
        gap: 2rem; 
        grid-template-areas:
            "app"
            "text"
            "movie";
    }
    .howToGrid {
        grid-template-columns: repeat(1, 1fr);
    }
    .banner {
        margin-top: 2rem;
    }
    .appRelease {
        font-size: 1.1rem;
    }
    
    /*見出し*/
    .sectionTitle {
        font-size: 1.2rem;
    }
    
    /*howto*/
    .howToGrid {
        padding: 1rem;
    }
    .howToSection .sectionTitle {
        margin-top: 1rem;
    }
    .howToGrid p {
        margin-bottom: .5rem;
        font-size: 1rem;
        line-height: 1.6;
    }
    .howToGrid li {
        margin-bottom: 1rem;
    }
    
    /*案内*/
    .boxContent {
        font-size: .85rem;
    }
    .boxTitle {
        font-size: 1rem;
    }
    .boxText {
        font-size: .95rem;
        text-align: left;
    }
    .boxText span {
        padding: 0;
    }
    
    /*商品*/
    .productLIst {
        margin-bottom: 2rem;
        gap:1rem;
    }
    .productItem {
        width: calc((100% - 1rem) / 2);
    }
    
    /*表*/
    .dataTitle {
        font-size: .95rem;
    }
    .dataImg {
        max-width: 90%;
    }
    .dataList {
        display: block;
        width: 100%;
    }
    .dataCap {
        padding: .4em .8em;
        width: 100%;
        border:none;
        justify-content: center;
    }
    .dataText {
        padding: .4rem .8rem;
        width: 100%;
        border-left:1px solid #ddd;
    } 
    
    /* --- FAQ --- */
    .summary, .boxInner, .icon::after {
        font-size: 0.8125rem;
    }
    .summary {
        padding: 1em 2em 1em 1em;
    }
    .boxInner {
        padding: 0 1em 1em;
    }
    
    /*環境*/
    .envSection {
        margin-bottom:0;
    }
    
    /* --- footer --- */
    .footer {
        width: 90%;
        font-size: .75rem;
    }

    
}