body {
font-family: 'Roboto', sans-serif;
}

html {
scroll-behavior: smooth;
}

.content {
background-color: black;
margin:auto;
}

.content img {
width:100%;
} 

.top-btn {
border-radius:10px;
background-color:#0092dc;
text-align:center;
font-size:25px;
color:#fff;
font-weight:bold;
display:block;
padding:0.5rem;
}

.top-btn2 {
border-radius:10px;
background-color:#009e0d;
text-align:center;
font-size:25px;
color:#fff;
font-weight:bold;
display:block;
padding:0.5rem;
}

.footer {
font-family: 'Roboto', sans-serif;
background: #000;
color:#FFF;
padding:1rem;
}


@media (min-width: 768px) {

.nav-item {
font-weight:bold;
text-align:center;
padding:0.9rem;
background-color:#000;
}

.navbar .navbar-toggler-icon { /* 三本線 */
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar .navbar-toggler { /* 枠線 */
border-color:#fff;
}

.box {
background-color:#000;
padding:3rem;
}

.top1 {
font-family: 'Noto Serif JP', serif;
font-weight: 300;
font-size:6vw;
color:white;
position:absolute;
left:10vw;
top:10vw;
width: 47vw;
margin:0 auto;
border-bottom: solid 2px #fff;
}

.top2 {
font-family: 'Noto Serif JP', serif;
font-weight:300;
font-size:2.8vw;
color:#ffcc00;
position:absolute;
left:10vw;
top:20vw;
line-height:3.4vw;
margin:0 auto;
}

.top3 {
font-family: 'Noto Serif JP', serif;
font-weight: 300;
font-size:0.9vw;
color:#fff;
position:absolute;
left:10vw;
top:27vw;
line-height:1.6vw;
width: 47vw;
margin:0 auto;
display: inline-block;
text-align: justify;
}

.top4 {
font-family: 'Noto Serif JP', serif;
font-weight:300;
font-size:3.8vw;
color:#ee7800;
position:absolute;
left:10vw;
top:15vw;
line-height:5vw;
width: 40vw;
border-bottom: solid 2px #fff;
margin:0 auto;
padding-bottom:1rem;
}

.top5 {
font-family: 'Noto Serif JP', serif;
font-weight: 300;
font-size:1vw;
color:#fff;
position:absolute;
left:10vw;
top:22vw;
line-height:1.4vw;
width: 40vw;
margin:0 auto;
display: inline-block;
text-align: justify;
}

.caption {
background-color: black;
font-size:3.5vw;
margin:0 auto;
transform: translateY(-50%) translateX(0.4rem);
}

.button {
height:auto;
padding:0.8rem;
margin:2rem;
background:#003366;
color: #FFF;
text-align: center;
letter-spacing:.1rem;
text-decoration: none;
font-weight: bold;
font-size:1.6rem;
border-radius: 35px;
}

.button2 {
margin:2rem 8rem;
}

.circle {
margin:0 1rem;
}

.circle h3 {
color:#fff;
background-color:#13dde8;
text-align:center;
margin:1rem 5rem;
padding:1rem;
border-radius:50px;
}

h2 {
font-size:2.7rem;
font-weight:100;
color:#ffcc00;
line-height:4rem;
text-align:center;
}

h3 {
font-family:'Roboto', sans-serif;
font-size:2.7rem;
font-weight:bold;
text-align:center;
color:#000;
}

h4 {
font-family: 'Noto Serif JP', serif;
font-size:5.2vw;
font-weight:400;
text-align: center;
color: #003366; 
}


h5 {
font-family:'Roboto', sans-serif;
font-size:1.6vw;
font-weight:bold;
text-align:left;
color: #000; 
margin-top: 1rem;
}

.media h5 {
font-family:'Roboto', sans-serif;
color:#fff;
padding:0.5rem 1rem;
background-color:#003366;
margin-top:2rem;
font-size:1.4rem;
font-weight:bold;
text-align:left;
}

h6 {
font-family:'Roboto', sans-serif;
font-size:1.1rem;
text-align:left;
line-height:1.5rem;
color: #000; 
margin: 1rem auto;
text-align: justify;
}

.area {
margin:1rem 4rem;

}

.area img {
margin:1rem auto;
width:100%;
}


.area2 {
font-size:1rem;
text-align: center;
margin:1rem 2rem;
line-height:1.6rem
}

.area3 {
margin:4rem;
}

.back {
padding-bottom:5rem;
background-repeat: repeat-y;
background-image: url(../img/back1.jpg);
width:100%;
}
	
.back2 {
border-bottom: 30px solid #003366;
border-top: 30px solid #003366;
background-image: url(../img/back2.jpg);
background-size:cover;
width:100%;
}

.back3 {
background-repeat: repeat-y;
background-image: url(../img/index2/back.jpg);
width:100%;
}

.back4 {
background-image: url(../img/back3.jpg);
background-size:cover;
width:100%;
padding:2rem 0 4rem 0;
}

.product {
padding-top:2rem;
}
	
.detail {
margin:4rem 8rem;
text-align: center;
}

.detail h3 {
font-family: 'Roboto', sans-serif;
font-size:2.8rem;
font-weight:bold;
text-align:center;
color:#FFF;
border-bottom:solid 6px yellow;
}

.logo {
margin:1rem auto 5rem auto;
}

.youtube {
margin:0 auto 5rem auto;
}

.line {
font-family: 'Roboto', sans-serif;
background-color:#003366;
color:#FFF;
text-align:center;
font-size:3rem;
font-weight:bold;
padding:1.5rem;
}

.icon img {
width:20%;
height:auto;
}

.contact {
padding-bottom:3rem;
}

.contact h3 {
font-family: 'Roboto', sans-serif;
font-size:3rem;
font-weight:bold;
text-align:left;
color:#FFF;
margin-top:1rem;
}

dl.contact-dl {
border-bottom:2px dotted #ccc;
padding-bottom:0.4rem;
margin-bottom:0.6rem;
}

dl.contact-dl dt {
font-weight:bold;
font-family: 'Roboto', sans-serif;
font-size:1.1vw;
color:#000;
}
}


@media screen and (max-width:768px){

.nav-item {
font-weight:bold;
text-align:center;
padding:0.9rem;
background-color:#000;
}

.navbar .navbar-toggler-icon { /* 三本線 */
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar .navbar-toggler { /* 枠線 */
border-color:#fff;
}

body {
margin-bottom:2rem;
}

.back {
padding-bottom:3.5rem;
background-repeat: repeat-y;
background-image: url(../img/back1.jpg);
width:100%;
}
	
.back2 {
border-bottom: 15px solid #003366;
border-top: 15px solid #003366;
background-image: url(../img/back2.jpg);
background-size:cover;
width:100%;
padding-bottom:4rem;
}

.back3 {
background-repeat: repeat-y;
background-image: url(../img/index2/back.jpg);
width:100%;
}

.back4 {
background-image: url(../img/back3.jpg);
background-size:cover;
width:100%;
padding:2rem 0 4rem 0;
}

.box {
background-color:#000;
padding:2rem;
}

.top1 {
font-family: 'Noto Serif JP', serif;
font-weight: 300;
font-size:5vw;
color:white;
position:absolute;
left:10vw;
top:2vw;
width:75vw;
border-bottom: solid 2px #fff;
}

.top2 {
font-family: 'Noto Serif JP', serif;
font-weight: 500;
font-size:3.2vw;
color:#ffcc00;
position:absolute;
left:10vw;
top:11vw;
line-height:3.5vw;
}
	
.top3 {
font-family: 'Noto Serif JP', serif;
font-weight: 500;
font-size:2vw;
color:#fff;
position:absolute;
left:10vw;
top:19vw;
line-height:2.5vw;
width:75vw;
display: inline-block;
text-align: justify;
}

.top4 {
font-family: 'Noto Serif JP', serif;
font-weight:300;
font-size:3.8vw;
color:#ee7800;
position:absolute;
left:10vw;
top:11vw;
line-height:5vw;
width: 60vw;
border-bottom: solid 2px #fff;
margin:0 auto;
padding-bottom:1rem;
}

.top5 {
font-family: 'Noto Serif JP', serif;
font-weight: 300;
font-size:1.7vw;
color:#fff;
position:absolute;
left:10vw;
top:20vw;
line-height:2.2vw;
width: 60vw;
margin:0 auto;
display: inline-block;
text-align: justify;
}
    
h2 {
font-size:2rem;
margin:0;
color:#ffcc00;
line-height:2.4rem;
}

h3 {
font-family:'Roboto', sans-serif;
font-size:1.8rem;
font-weight:bold;
text-align:center;
color:#000;
margin: 1.5rem auto;
}

h4 {
font-family: 'Noto Serif JP', serif;
font-size:2.6rem;
font-weight:bold;
text-align: center;
color: #003366; 
margin:auto 1rem;
}
		
h5 {
font-family:'Roboto', sans-serif;
font-size:1.6rem;
font-weight:bold;
text-align:left;
color: #000; 
}

.media h5 {
font-family:'Roboto', sans-serif;
color:#fff;
padding:0.5rem 1rem;
background-color:#003366;
margin-top:2rem;
font-size:1.3rem;
font-weight:bold;
text-align:left;
}

h6 {
font-family:'Roboto', sans-serif;
font-size:1rem;
text-align:left;
line-height:1.3rem;
color: #000; 
margin: 1.2rem auto;
text-align: justify;
}

.area {
margin:1rem 0;
}

.area2 {
font-size:1rem;
text-align: center;
margin:0 4rem;
line-height:1.6rem
}

.area3 {
margin:5rem 0;
}
    
.caption {
background-color: black;
top: 0;
left: 0;
font-size:4.6vw;
padding: 0 0.5vw;
transform: translateY(-50%) translateX(1rem);
position: absolute;
line-height:5vw;
}
	
.product {
padding-top:2rem;
}

.detail {
margin-top:3rem;
text-align: center;
}

.detail h3 {
font-family: 'Roboto', sans-serif;
font-size:2.1rem;
font-weight:bold;
text-align: center;
color:#FFF;
border-bottom:solid 6px yellow;
}

.logo {
margin:0 16rem;
}

.youtube {
margin:0 auto 2rem auto;
}

.line {
font-size:2rem;
}

.button {
height:auto;
width:12rem;
margin:0.5rem;
padding:auto;
background:#003366;
color: #FFF;
text-align: center;
text-decoration: none;
font-weight: bold;
border-radius: 30px;
font-size:1rem;
text-align: center;
}

.button2 {
margin:1rem 1.5rem;
}

.circle {
margin:0 1rem;
}

.circle h3 {
color:#fff;
background-color:#13dde8;
text-align:center;
margin:1rem 5rem;
padding:1rem;
border-radius:50px;
}

.icon img {
width:22%;
height:auto;
}

.contact {
padding-bottom:13rem;
margin:0 auto;
}

.contact h3 {
font-family: 'Roboto', sans-serif;
font-size:2.4rem;
font-weight:bold;
text-align:center;
color:#FFF;
}

dl.contact-dl {
border-bottom:2px dotted #ccc;
padding-bottom:0.1rem;
margin-bottom:0.6rem;
}

dl.contact-dl dt {
font-weight:bold;
font-family: 'Roboto', sans-serif;
font-size:1.7vw;
color:#000;
}
}

@media screen and (max-width:599px){ 

.nav-item {
font-weight:bold;
text-align:center;
padding:0.9rem;
background-color:#000;
}

.navbar .navbar-toggler-icon { /* 三本線 */
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar .navbar-toggler { /* 枠線 */
border-color:#fff;
}

.back {
background-repeat: repeat-y;
background-image: url(../img/back1.jpg);
width:100%;
}

.back2 {
border-bottom: 15px solid #003366;
border-top: 15px solid #003366;
background-image: url(../img/back2-1.jpg);
width:100%;
}

.back3 {
background-repeat: repeat-y;
background-image: url(../img/index2/back.jpg);
width:100%;
}

.back4 {
background-image: url(../img/back3.jpg);
background-size:cover;
width:100%;
padding:2rem 0;
}

.box {
background-color:#000;
padding:2rem;
}

.top1 {
font-family: 'Noto Serif JP', serif;
font-weight: 300;
font-size:10vw;
color:white;
position:absolute;
left:10vw;
top:10vw;
width: 80vw;
border-bottom: solid 2px #fff;
}

.top2 {
font-family: 'Noto Serif JP', serif;
font-weight: 300;
font-size:6vw;
color:#ffcc00;
position:absolute;
left:10vw;
top:30vw;
line-height:7vw;
}
	
.top3 {
font-family: 'Noto Serif JP', serif;
font-weight: 300;
font-size:3.5vw;
color:#fff;
position:absolute;
left:10vw;
top:47vw;
line-height:5vw;
width: 80vw;
text-align: justify;
margin-bottom:5vw;
}

.top4 {
font-family: 'Noto Serif JP', serif;
font-weight:300;
font-size:9vw;
color:#ee7800;
position:absolute;
left:10vw;
top:25vw;
line-height:10vw;
width:80vw;
border-bottom: solid 2px #fff;
margin:0 auto;
padding-bottom:1rem;
}

.top5 {
font-family: 'Noto Serif JP', serif;
font-weight: 300;
font-size:3.6vw;
color:#fff;
position:absolute;
left:10vw;
top:42vw;
line-height:6vw;
width: 80vw;
margin:0 auto;
display: inline-block;
text-align: justify;
}

h2 {
font-size:1.2rem;
color:#ffcc00;
margin:1rem auto;
line-height:1.8rem;
}

h3 {
font-family:'Roboto', sans-serif;
font-size:1.8rem;
font-weight:bold;
text-align:center;
color:#000;
margin: 1rem auto;
}

h4 {
font-family: 'Noto Serif JP', serif;
font-size:2.4rem;
font-weight:bold;
text-align: center;
color: #003366; 
margin:auto;
}

h5 {
font-family:'Roboto', sans-serif;
font-size:1.3rem;
font-weight:bold;
text-align:left;
color: #000;
margin-top:0.5rem;
}

.media h5 {
font-family:'Roboto', sans-serif;
color:#fff;
padding:0.5rem 1rem;
background-color:#003366;
margin-top:2rem;
font-size:1.3rem;
font-weight:bold;
text-align:left;
}

h6 {
font-family:'Roboto', sans-serif;
font-size:1rem;
text-align:left;
line-height:1.2rem;
color: #000; 
text-align: justify;
}

.area {
margin:1rem auto;
}

.area img{
margin:1rem auto;
width:100%;
}

.area2 {
font-size:1rem;
text-align: center;
margin:0 1rem;
line-height:1.6rem
}

.area3 {
margin:2rem 1rem;
}

.caption {
background-color: black;
color:#ffcc00;
border-radius:10vw;
line-height:10vw;
top: 0;
left: 0;
font-size:8vw;
padding: 0 0.5vw;
margin:0 auto;
transform: translateY(-50%) translateX(1.8rem);
position: absolute;
}
	
.product {
padding-top:2rem;
}

.detail {
margin-top:3rem;
text-align: center;
}

.detail h3 {
font-family: 'Roboto', sans-serif;
font-size:1.3rem;
font-weight:bold;
text-align:center;
color:#FFF;
border-bottom:solid 4px yellow;
}

.logo {
margin:0 6rem;
}

.youtube {
margin:0 auto 2rem auto;
}

.line {
font-size:1.8rem;
}

.button {
height:auto;
width:18rem;
padding:0.4rem;
margin:0.3rem;
background:#003366;
color: #FFF;
text-align: center;
letter-spacing: .1rem;
text-decoration: none;
font-weight: bold;
border-radius: 30px;
font-size:1.1rem;
text-align: center;
}

.button2 {
margin:1rem;
}

.circle {
margin:0 auto;
}

.circle h3 {
color:#fff;
background-color:#13dde8;
text-align:center;
margin:1rem 3rem;
padding:0.5rem;
border-radius:50px;
}

.icon img {
width:20%;
height:auto;
}

.contact {
padding:0 0.3rem;
margin:0 auto;
}

.contact h3 {
font-family: 'Roboto', sans-serif;
font-size:1.6rem;
font-weight:bold;
text-align:center;
color:#FFF;
padding:0;
}

dl.contact-dl dt  {
font-size:0.8rem;
}
}