html{scroll-behavior: smooth;}
body{
    font-family: 'Times New Roman','Meiryo',sans-serif;
    margin: 0;
    min-height: 100vh;
    display: grid;
    grid-template:
    "header   " 40px
    "carousels" auto
    "headlines" auto
    "contents " auto 
    "footer   " auto; 
}
@media (min-width: 767px){
    body{
        grid-template:
        "header   " 40px
        "carousels" 400px
        "headlines" auto
        "contents " auto 
        "footer   " auto; 
    }
}
_:lang(x)::-internal-media-controls-overlay-cast-button, 
    fieldset{
        border-color: rgb(240,240,240);
    }
_:lang(x)::-internal-media-controls-overlay-cast-button, 
    select{
        background-color: buttonface;
        height: 26px;
        border-radius: 3px;
    }
_:lang(x)::-internal-media-controls-overlay-cast-button, 
    body{
        text-shadow: 0 0 black;
    }
header a{
    color:white;
    text-decoration: none;
}
footer a{
    color:black;
    text-decoration: none;
}

header{
    grid-area: header;
    /* padding: .5rem; */
    color: #fff;
    background-color: #373a3e;
    font-size: 1.5rem;
    border: solid;
    border-color: #373a3e;
    display: flex;
    justify-content: space-between;
}
carousels{
    /* background-image : url("./img/model01gray.png");
    background-size:240px 150px; */
    grid-area: carousels;
    color:#5a5a5a;
    background-color:#d1d1d1;
    /* border: solid;
    border-color: #000000;
    border-width: 1px; */
    align-items: center;
    display: grid;
    grid-template:
    "... carousel1 ..." /
    15% auto 15%;
    padding-bottom: 1rem;
}
@media (min-width: 767px){
    carousels{
        padding-bottom: 0rem;
    }
}
carousel1{
    grid-area: carousel1;
}
headlines{
    grid-area: headlines;
    text-align: center;
    border: solid;
    border-color: #000000;
    border-width: 1px;
    /* max-width: 1320px; */
    display: grid;
    grid-template:
    "headline1"
    "headline2"
    "headline3" /
    1fr;  
}
@media (min-width: 767px){
    headlines{
        grid-template:
        "... headline1 ... headline2 ... headline3 ..." /
        10% 1fr auto 1fr auto 1fr 10% ;  
    
        }
}
.headline{
    margin: 1.4rem 1.2rem;
}
headline1{
    grid-area: headline1;
    text-align: center;
    /* border: solid;
    border-color: #000000;
    border-width: 1px; */

}
headline2{
    grid-area: headline2;
    text-align: center;
    /* border: solid;
    border-color: #000000;
    border-width: 1px; */
}
headline3{
    grid-area: headline3;
    text-align: center;
    /* border: solid;
    border-color: #000000;
    border-width: 1px; */
}
.contents{
    grid-area: contents;
    border: solid;
    border-color: #000000;
    border-width: 1px;
    color:rgb(90, 90, 90);
    text-align: center;
}
.content1{
    grid-area: content1;
    border: solid;
    border-color: #000000;
    border-width: 1px;
    display: grid;
    grid-template:
    "... content1_l ... content1_r ..." /
    10% 500px 8% 1fr 10% ;  
}
.content1_l{
    grid-area: content1_l;
    border: solid;
    border-color: #000000;
    border-width: 1px; 
}
.content1_r{
    grid-area: content1_r;
    border: solid;
    border-color: #000000;
    border-width: 1px; 
    align-items: center;
    display:grid;
} 
.content2{
    grid-area: content2;
    border: solid;
    border-color: #000000;
    border-width: 1px;
    display: grid;
    grid-template:
    "... content2_l ... content2_r ..." /
    10% 1fr 8% 500px 10% ;  
}
.content2_l{
    grid-area: content2_l;
    border: solid;
    border-color: #000000;
    border-width: 1px; 
    align-items: center;
    display:grid;
}
.content2_r{
    grid-area: content2_r;
    border: solid;
    border-color: #000000;
    border-width: 1px; 
    align-items: center;
    display:grid;
} 
.content3{
    grid-area: content3;
    border: solid;
    border-color: #000000;
    border-width: 1px;
    display: grid;
    grid-template:
    "... content3_l ... content3_r ..." /
    10% 500px 8% 1fr 10% ;  
}
.content3_l{
    grid-area: content3_l;
    border: solid;
    border-color: #000000;
    border-width: 1px; 
}
.content3_r{
    grid-area: content3_r;
    border: solid;
    border-color: #000000;
    border-width: 1px; 
    align-items: center;
    display:grid;
} 
footer{
    grid-area: footer;
    border: solid;
    border-color: #000000;
    border-width: 1px;   
    display: grid;
    grid-template:
    "footer_l ... footer_r" /
    auto auto 15%;
}
footer_l{
    grid-area: footer_l;
    border: solid;
    border-color: #000000;
    border-width: 1px;   
}
footer_r{
    grid-area: footer_r;
    border: solid;
    border-color: #000000;
    border-width: 1px;   
}
.singup{
    background-color: #0d6efd;
    border-color: #0d6efd;
    border-radius: 10px;
    border-style: solid;
    border-width: 1px;
    color: rgb(255, 255, 255);
    cursor: pointer;
    display: inline-block;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    padding: 8px 16px;
    text-decoration-line: none;
    transition-delay: 0s, 0s, 0s;
    transition-duration: 0.15s, 0.15s, 0.15s;
    transition-property: color, background-color, border-color;
    transition-timing-function: ease-in-out, ease-in-out, ease-in-out;
    user-select: none;
}
.singup:hover {
    color: #fff;
    background-color: #0b5ed7;
    border-color: #0a58ca;
}
logo{
    grid-area: logo;
}
login{
    grid-area: login;
}
.circle {
  /* background-color:#d1d1d1; */
  width: 140px;
  height: 140px;
  display: inline-block;
  border-radius: 50%;
}
.ditail{
    color: #ffffff;
    background-color: #6c757d;
    border-color: #6c757d;
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    line-height: 24px;
    padding: 6px 12px;
    text-align: center;
    text-decoration-line: none;
    transition-delay: 0s, 0s;
    transition-duration: 0.15s, 0.15s;
    transition-property: background-color, border-color;
    transition-timing-function: ease-in-out, ease-in-out;
    vertical-align: middle;
}
.ditail:hover {
    background-color: #5c636a;
    border-color: #565e64;
}
.square {
  background-color:#d1d1d1;
  width: 500px;
  height: 500px;
  text-align:center;
  align-items: center;
  display:grid;
}
h1{
    box-sizing: border-box;
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 48px;
    margin-bottom: 8px;
    margin-top: 0px;
    text-align: left;
}
h2{
    box-sizing: border-box;
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: -0.8px;
    line-height: 50px;
    margin: 8px; 
}
text{
    box-sizing: border-box;
    font-size: 56px;
    font-weight: 400;
    line-height: 84px;
}
.youtube{
    width: 100%;
    aspect-ratio: 16/9;
}
@media (min-width: 767px){
    .youtube{
        width: 560px;
        height: 315px;
    }
}

red{
    color: red;
}
.icon{
    font-family: 'Material Icons';
    font-size: 8rem;
    position: relative;
    top: -0.5rem;
    color: darkblue;
}
.textDecorationNone{
    text-decoration: none;
}
.colorBlue{
    color: blue;
}
.displayInline{
    display: inline;
}
.maxWidth70per{
    max-width: 70%;
}
/* material-icons-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/material-icons-v145-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

p:lang(en) {
    font-size: 19px;
}
h3:lang(en) {
    font-size: 21px;
}