@charset "UTF-8";

/*すべてに適用、リンク下線を外す*/
a {
text-decoration: none;
}

/*スクロールを下にしたのを上に戻すボタン*/
html {
    scroll-behavior: smooth;
}

.pagetop {
    height: 35px;
    width: 35px;
    position: fixed;
    right: 25px;
    bottom: 25px;
    background: #fff;
    border: solid 2px #000;
    border-radius: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.pagetop {
    box-shadow: 0 4px 6px rgb(0 0 0 / 30%);
}

.pagetop__arrow {
    height: 5px;
    width: 5px;
    border-top: 3px solid #000;
    border-right: 3px solid #000;
    transform: translateY(20%) rotate(-45deg);
}

@media (hover: hover) and (pointer: fine) {
    .pagetop:hover, .pagetop:hover .pagetop__arrow {
        border-color: #3293e7;
    }
}

/*土台*/
.container {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: auto auto auto auto;
gap: 2px;
padding: 2px;
font-family: ArialMT, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3";
background: #FFFFFF;
}

/*土台につける、左右の空白*/
.empty {
background: #FFFFFF;
}

/*土台につける、コンテンツを書くところ*/
.content {
background: #FFFFFF;
gap: 2px;
padding: 2px;
}

/*タイトルの写真*/
.img-title {
display: grid;
grid-template-columns: calc(100vw * 0.4);
grid-template-rows: calc(100vw * 0.15);
margin: 0 auto;
background-color: #FFFFFF;
}

.img-title img { 
width: 100%;
height:100%;
object-fit: contain;
}

/*説明用の写真、S時計*/
.img-app-sc {
display: grid;
place-content: center;
grid-template-columns: repeat(3, calc(100vw * 0.1 * 1.5));
grid-template-rows: repeat(1, calc(100vw * 0.1777 * 1.5));
margin: 0 auto;
background-color: #FFFFFF;
}

.img-app-sc img { 
width: 100%;
height:100%;
object-fit: contain;
}

/*説明用の写真、エンド*/
.img-app-end {
display: grid;
place-content: center;
grid-template-columns: calc(100vw * 0.1 * 1.5);
grid-template-rows: calc(100vw * 0.1777 * 1.5);
margin: 0 auto;
background-color: #FFFFFF;
}

.img-app-end img { 
width: 100%;
height: 100%;
object-fit: contain;
}

/*縦長の1.333比率 1画像を置く分の1画像*/
.img13-row1-1 {
display: grid;
grid-template-columns: repeat(1, calc(100vw * 0.1 * 2));
grid-template-rows: repeat(1, calc(100vw * 0.1333 * 2));
margin: 0 auto;
background-color: #FFFFFF;
}

.img13-row1-1 img {
width: 100%;
height:100%;
object-fit: contain;
}

/*縦長の1.333比率 2画像を置く分の1画像*/
.img13-row2-1 {
display: grid;
grid-template-columns: repeat(1, calc(100vw * 0.1 * 1.75));
grid-template-rows: repeat(1, calc(100vw * 0.1333 * 1.75));
margin: 0 auto;
background-color: #FFFFFF;
}

.img13-row2-1 img { 
width: 100%;
height:100%;
object-fit: contain;
}

/*縦長の1.333比率 2画像を置く分の2画像*/
.img13-row2-2 {
display: grid;
grid-template-columns: repeat(2, calc(100vw * 0.1 * 1.75));
grid-template-rows: repeat(1, calc(100vw * 0.1333 * 1.75));
margin: 0 auto;
background-color: #FFFFFF;
}

.img13-row2-2 img { 
width: 100%;
height:100%;
object-fit: contain;
}

/*縦長の1.333比率 3画像を置く分の1画像*/
.img13-row3-1 {
display: grid;
grid-template-columns: repeat(1, calc(100vw * 0.1 * 1.5));
grid-template-rows: repeat(1, calc(100vw * 0.1333 * 1.5));
margin: 0 auto;
background-color: #FFFFFF;
}

.img13-row3-1 img { 
width: 100%;
height:100%;
object-fit: contain;
}

/*縦長の1.333比率 3画像を置く分の2画像*/
.img13-row3-2 {
display: grid;
grid-template-columns: repeat(2, calc(100vw * 0.1 * 1.5));
grid-template-rows: repeat(1, calc(100vw * 0.1333 * 1.5));
margin: 0 auto;
background-color: #FFFFFF;
}

.img13-row3-2 img { 
width: 100%;
height:100%;
object-fit: contain;
}

/*縦長の1.333比率 3画像を置く分の3画像*/
.img13-row3-3 {
display: grid;
grid-template-columns: repeat(3, calc(100vw * 0.1 * 1.5));
grid-template-rows: repeat(1, calc(100vw * 0.1333 * 1.5));
margin: 0 auto;
background-color: #FFFFFF;
}

.img13-row3-3 img { 
width: 100%;
height:100%;
object-fit: contain;
}

/*縦長の1.777比率 1画像を置く分の1画像*/
.img17-row1-1 {
display: grid;
grid-template-columns: repeat(1, calc(100vw * 0.1 * 2));
grid-template-rows: repeat(1, calc(100vw * 0.1777 * 2));
margin: 0 auto;
background-color: #FFFFFF;
}

.img17-row1-1 img { 
width: 100%;
height:100%;
object-fit: contain;
}

/*縦長の1.777比率 2画像を置く分の1画像*/
.img17-row2-1 {
display: grid;
grid-template-columns: repeat(1, calc(100vw * 0.1 * 1.75));
grid-template-rows: repeat(1, calc(100vw * 0.1777 * 1.75));
margin: 0 auto;
background-color: #FFFFFF;
}

.img17-row2-1 img { 
width: 100%;
height:100%;
object-fit: contain;
}

/*縦長の1.777比率 2画像を置く分の2画像*/
.img17-row2-2 {
display: grid;
grid-template-columns: repeat(2, calc(100vw * 0.1 * 1.75));
grid-template-rows: repeat(1, calc(100vw * 0.1777 * 1.75));
margin: 0 auto;
background-color: #FFFFFF;
}

.img17-row2-2 img { 
width: 100%;
height:100%;
object-fit: contain;
}

/*縦長の1.777比率 3画像を置く分の1画像*/
.img17-row3-1 {
display: grid;
grid-template-columns: repeat(1, calc(100vw * 0.1 * 1.5));
grid-template-rows: repeat(1, calc(100vw * 0.1777 * 1.5));
margin: 0 auto;
background-color: #FFFFFF;
}

.img17-row3-1 img { 
width: 100%;
height:100%;
object-fit: contain;
}

/*縦長の1.777比率 3画像を置く分の2画像*/
.img17-row3-2 {
display: grid;
grid-template-columns: repeat(2, calc(100vw * 0.1 * 1.5));
grid-template-rows: repeat(1, calc(100vw * 0.1777 * 1.5));
margin: 0 auto;
background-color: #FFFFFF;
}

.img17-row3-2 img { 
width: 100%;
height:100%;
object-fit: contain;
}

/*縦長の1.777比率 3画像を置く分の3画像*/
.img17-row3-3 {
display: grid;
grid-template-columns: repeat(3, calc(100vw * 0.1 * 1.5));
grid-template-rows: repeat(1, calc(100vw * 0.1777 * 1.5));
margin: 0 auto;
background-color: #FFFFFF;
}

.img17-row3-3 img { 
width: 100%;
height:100%;
object-fit: contain;
}

/*横長の1.333比率  2画像を置く分の1画像*/
.img13-col2-1 {
display: grid;
grid-template-columns: repeat(1, calc(100vw * 0.1333 * 1.75));
grid-template-rows: repeat(1, calc(100vw * 0.1 * 1.75));
margin: 0 auto;
background-color: #FFFFFF;
}

.img13-col2-1 img {
width: 100%;
height:100%;
object-fit: contain;
}

/*横長の1.333比率  2画像を置く分の2画像*/
.img13-col2-2 {
display: grid;
grid-template-columns: repeat(2, calc(100vw * 0.1333 * 1.75));
grid-template-rows: repeat(1, calc(100vw * 0.1 * 1.75));
margin: 0 auto;
background-color: #FFFFFF;
}

.img13-col2-2 img { 
width: 100%;
height:100%;
object-fit: contain;
}

/*横長の1.777比率  2画像を置く分の1画像*/
.img17-col2-1 {
display: grid;
grid-template-columns: repeat(1, calc(100vw * 0.1777 * 1.75));
grid-template-rows: repeat(1, calc(100vw * 0.1 * 1.75));
margin: 0 auto;
background-color: #FFFFFF;
}

.img17-col2-1 img {
width: 100%;
height:100%;
object-fit: contain;
}

/*横長の1.777比率  2画像を置く分の2画像*/
.img17-col2-2 {
display: grid;
grid-template-columns: repeat(1, calc(100vw * 0.1777 * 1.75));
grid-template-rows: repeat(2, calc(100vw * 0.1 * 1.75));
margin: 0 auto;
background-color: #FFFFFF;
}

.img17-col2-2 img { 
width: 100%;
height:100%;
object-fit: contain;
}

/*----------*/
/*----------*/
/*モニタ画面の大きさで、中身のサイズを可変する*/
@media (max-width: 700px) {

/*土台*/
.container {
grid-template-columns: 1fr 20fr 1fr;
grid-template-rows: auto auto auto auto;
}

/*タイトルの写真*/
.img-title {
display: grid;
grid-template-columns: calc(100vw * (0.4 * 2.0));
grid-template-rows: calc(100vw * (0.15 * 2.0));
margin: 0 auto;
}

/*説明用の写真、S時計*/
.img-app-sc {
display: grid;
grid-template-columns: repeat(3, calc(100vw * (0.1 * 1.5 * 1.5)));
grid-template-rows: repeat(1, calc(100vw * (0.17777 * 1.5 * 1.5)));
margin: 0 auto;
}

/*説明用の写真、エンド*/
.img-app-end {
display: grid;
grid-template-columns: repeat(1, calc(100vw * (0.1 * 1.5 * 1.5)));
grid-template-rows: repeat(1, calc(100vw * (0.17777 * 1.5 * 1.5)));
margin: 0 auto;
}

/*13 1*/
.img13-row1-1 {
display: grid;
grid-template-columns: repeat(1, calc(100vw * 0.1 * 2 * 1.5));
grid-template-rows: repeat(1, calc(100vw * 0.1333 * 2 * 1.5));
margin: 0 auto;
}

/*13 2*/
.img13-row2-1 {
display: grid;
grid-template-columns: repeat(1, calc(100vw * 0.1 * 1.75 * 1.5));
grid-template-rows: repeat(1, calc(100vw * 0.1333 * 1.75 * 1.5));
margin: 0 auto;
}

/*13 3*/
.img13-row2-2 {
display: grid;
grid-template-columns: repeat(2, calc(100vw * 0.1 * 1.75 * 1.5));
grid-template-rows: repeat(1, calc(100vw * 0.1333 * 1.75 * 1.5));
margin: 0 auto;
}

/*13 4*/
.img13-row3-1 {
display: grid;
grid-template-columns: repeat(1, calc(100vw * 0.1 * 1.5 * 1.5));
grid-template-rows: repeat(1, calc(100vw * 0.1333 * 1.5 * 1.5));
margin: 0 auto;
}

/*13 5*/
.img13-row3-2 {
display: grid;
grid-template-columns: repeat(2, calc(100vw * 0.1 * 1.5 * 1.5));
grid-template-rows: repeat(1, calc(100vw * 0.1333 * 1.5 * 1.5));
margin: 0 auto;
}

/*13 6*/
.img13-row3-3 {
display: grid;
grid-template-columns: repeat(3, calc(100vw * 0.1 * 1.5 * 1.5));
grid-template-rows: repeat(1, calc(100vw * 0.1333 * 1.5 * 1.5));
margin: 0 auto;
}

/*17 1*/
.img17-row1-1 {
display: grid;
grid-template-columns: repeat(1, calc(100vw * 0.1 * 2 * 1.5));
grid-template-rows: repeat(1, calc(100vw * 0.1777 * 2 * 1.5));
margin: 0 auto;
}

/*17 2*/
.img17-row2-1 {
display: grid;
grid-template-columns: repeat(1, calc(100vw * 0.1 * 1.75 * 1.5));
grid-template-rows: repeat(1, calc(100vw * 0.1777 * 1.75 * 1.5));
margin: 0 auto;
}

/*17 3*/
.img17-row2-2 {
display: grid;
grid-template-columns: repeat(2, calc(100vw * 0.1 * 1.75 * 1.5));
grid-template-rows: repeat(1, calc(100vw * 0.1777 * 1.75 * 1.5));
margin: 0 auto;
}

/*17 4*/
.img17-row3-1 {
display: grid;
grid-template-columns: repeat(1, calc(100vw * 0.1 * 1.5 * 1.5));
grid-template-rows: repeat(1, calc(100vw * 0.1777 * 1.5 * 1.5));
margin: 0 auto;
}

/*17 5*/
.img17-row3-2 {
display: grid;
grid-template-columns: repeat(2, calc(100vw * 0.1 * 1.5 * 1.5));
grid-template-rows: repeat(1, calc(100vw * 0.1777 * 1.5 * 1.5));
margin: 0 auto;
}

/*17 6*/
.img17-row3-3 {
display: grid;
grid-template-columns: repeat(3, calc(100vw * 0.1 * 1.5 * 1.5));
grid-template-rows: repeat(1, calc(100vw * 0.1777 * 1.5 * 1.5));
margin: 0 auto;
}

/*横置き1.333 1*/
.img13-col2-1 {
display: grid;
grid-template-columns: repeat(1, calc(100vw * 0.1333 * 1.75 * 1.5));
grid-template-rows: repeat(1, calc(100vw * 0.1 * 1.75 * 1.5));
margin: 0 auto;
}

/*横置き1.333 2*/
.img13-col2-2 {
display: grid;
grid-template-columns: repeat(2, calc(100vw * 0.1333 * 1.75 * 1.5));
grid-template-rows: repeat(1, calc(100vw * 0.1 * 1.75 * 1.5));
margin: 0 auto;
}

/*横置き1.777 1*/
.img17-col2-1 {
display: grid;
grid-template-columns: repeat(1, calc(100vw * 0.1777 * 1.75 * 1.5));
grid-template-rows: repeat(1, calc(100vw * 0.1 * 1.75 * 1.5));
margin: 0 auto;
}

/*横置き1.777 2*/
.img17-col2-2 {
display: grid;
grid-template-columns: repeat(1, calc(100vw * 0.1777 * 1.75 * 1.5));
grid-template-rows: repeat(2, calc(100vw * 0.1 * 1.75 * 1.5));
margin: 0 auto;
}

}