@charset "UTF-8";
/* CSS Document */


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


html{background-color:#004171;
}

body{font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
    max-width: 700px;
    margin: auto;
	text-align: center;
	padding:auto; 
    position: relative;	
    letter-spacing: .1rem;
    line-height: 2rem;
}
section{overflow-x: hidden;}

a{color: white;
text-decoration: none;
font-weight: 600;}


	.sp {
    display: none !important;
  }

  .pc {
    display: block !important;
  }

.line{position: sticky;
    top:90%;
width:60%;
    z-index: 999;
height: 50px;
    margin: auto;
    color:white;
    letter-spacing: .6rem;

}
@keyframes shiny {
    0% { left: -20%; }
    10% { left: 120%; }
    100% { left: 120%; }
}
.shiny-btn {
    position: relative;
    display: block;
    width: 100%;
    height: 50px;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    background-color: #38BF4D;
    overflow: hidden;
      border-radius: 20px;
    padding: 10px;
}

.shiny-btn::after {
    content: '';
    position: absolute;
    top: -10%;
    left: -20%;
    width: 40px;
    height: 100%;
    transform: scale(2) rotate(20deg);
    background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, .5) 100%, rgba(255, 255, 255, 0) 0%);
    
    /* アニメーション */
    animation-name: shiny;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

h1 h2 h3{margin:0;
padding: 0;}

h1{
font-size:5rem;
letter-spacing: .1rem;
line-height: 5.5rem;
}

h2{font-size: 3rem;
  letter-spacing: .7rem;}

h3{font-size: 1.4rem;
letter-spacing: .5rem;
padding: 2rem 0}


.shadow{text-shadow:  3px 0px 3px black;}

.mf-1{font-family: myfont;}
.mf-2{font-family: myfont2;}

#top,#jitumu{background-image:url("../img/top-yado.jpg");
    background-blend-mode:lighten;
     background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    position: relative;
    height:auto;   
    z-index: 99;
}

#top{padding-top: 10px;
}

#jitumu{margin-top: -120px;
padding-top: 10px;
padding-bottom: 200px;
margin-bottom: 2rem;}

.rounds{width:80%;
position: relative;
margin: auto;}

.site-title{
color:white;
text-align: center;
font-size: 3rem;
}


.bg-white{background-color:white;}


.flex-box{display:flex;
    display: -webkit-flex;
    margin: auto;
  flex-wrap: wrap;
 align-items: flex-start;
justify-content: space-between;

}

.flex-box2{display:flex;
    display: -webkit-flex;
    margin: auto;
  width:80%;
  flex-wrap: wrap;
justify-content: center;
color:white;}

.float{float: left;}

/*三角装飾*/

.sankaku{
  padding: 40px;
  position: relative;
  background:white; 
}
.sankaku::after{
    content: "";
    position: absolute;
    height: 60px;
    width: 100%;
    clip-path: polygon(50% 100%, 100% 0%, 0% 0%);
    background-color: #004171;
    left: 0;
    top: -1px;
}

.sankaku2 , .sankaku3{
  padding: 60px;
  position: relative;
  background:#004171; 
}


.sankaku2::after{
    content: "";
    position: absolute;
    height: 60px;
    width: 100%;
    clip-path: polygon(50% 100%, 100% 0%, 0% 0%);
    background-color: white;
    left: 0;
    top: -1px; 
}
.sankaku3::before{
    content: "";
    position: absolute;
    height: 60px;
    width: 100%;
    clip-path: polygon(50% 100%, 100% 0%, 0% 0%);
    background:#004171; 
    left: 0;
    top: -.3px; 
    z-index: 4;
}

/*丸装飾*/
.round{
display:flex;
align-items:center;
justify-content:center;
background: #A08017;
border-radius: 50%;
width:120px;
height:120px;
margin: auto;
color:white;
font-size: 1.2rem;
}


/*四角形装飾*/
.squea{background: #A08017;
border-radius: 10px;
padding:4rem;
margin: 0 0 0 2rem;
color:white;
text-align:left;
width:70%;}


.squea1{background: #A08017;
border-radius: 10px 0 0 10px;
padding:1rem;
margin: 0 0 2rem 2rem;}

.squea2{background: #A08017;
border-radius: 0 10px 10px 0;
padding:1rem;
margin: 0 2rem 2rem 0 ;}

.squea3{background: #A08017;
border-radius: 10px;
padding:3rem;
margin-right: 0;}

.box1{
background: #004171; 
border:solid 2px white;
border-radius: 10px;
margin-left: -1rem;
margin-top: 6rem;
width: 58%;
padding: 1.5rem;
color:white;
}
.box2{
position:absolute;
background: #A08017;
border:solid 2px white ;
border-radius: 10px;
width: 58%;
margin-top: -1rem;
padding: 2rem;
color:white;
right:-1rem;
}


.calam2{width:calc(100%/2); 
}
.calam2m{width:calc(100%/2);  
}
.calam3{width:calc(100%/3); }

.w30{width:30%;}
.w40,.w40s{width:40%;}
.w60,.w60s{width:60%;}
.w70{width:70%;}

.vl-m{align-items: center;}

.right-1{margin-right: -10%;}
.right-2{margin-right: -20%;}
.left-1{margin-left: -10%;}
.left-2{margin-left: -20%;}

.t-left{text-align: left;}


/*吹き出し*/
.balloon,.balloon2 {
  position: relative;
  display: block;
text-align: center;
  margin: 1.5em 2rem 0;
  padding: 2rem;
  min-width: 80%;
  max-width: 100%;
  color: white;
  font-size: 16px;
  background: #004171;
  border-radius: 15px;
}

.in-b{text-align:left;
display:inline-block;}




.balloon2 {background: #A08017;
margin: 1.5em 2em 0 0;}

.balloon:before {
  content: "";
  position: absolute;
  top: 50%;
  right: -40px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-left: 40px solid #004171;
  z-index: 2;
}

.balloon2:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -40px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-right: 40px solid #A08017;
  z-index: 2;
}

.balloon .balloon2 p {
  margin: 0;
  padding: 0;
}
.wrap{position: relative;}

.kyougoku1{position: absolute;
right:1rem;}

.kyougoku1 img{max-width:350px;}

.menu{position: relative;
}
.menu p{position: absolute;
  bottom:0;
  left: 50%;
 -ms-transform: translate(-50%);
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
  color: #fff;
  font-size: .8rem;
  background:  #A08017;
  width:300px;
  margin-bottom: 0!important;
  padding: 1rem!important;
  border-radius: 0 0 10px 10px
}

.menu img{max-width:300px;
max-height:300px;
    margin: auto;
border-radius: 10px;
}

/*moji*/
.mini{font-size:.8rem;}
.prohivit{font-size: .5rem;}
.white{color:white;}

.fs-05{font-size: .5rem;}
.fs-08{font-size: .8rem;}
.fs-1{font-size: 1rem;}
.fs-12{font-size: 1.2rem;}
.fs-15{font-size: 1.5rem;}
.fs-2{font-size: 2rem;}
.fs-3{font-size: 3rem;}

/*レイアウト*/

.mt-1{margin-top:1rem;}
.mt-2{margin-top:2rem;}
.mt-3{margin-top:3rem;}

.mb-1{margin-bottom: 1rem;}
.mb-2{margin-bottom: 2rem;}
.mb-3{margin-bottom: 3rem;}

.pad-b1{padding-bottom: 1rem;}
.pad-b2{padding-bottom: 2rem;}
.pad-b3{padding-bottom: 3rem;}
.pad-t1{padding-top: 1rem;}
.pad-t2{padding-top: 2rem;}
.pad-t3{padding-top: 3rem;}
.pad-1{padding:1rem;}
.pad-2{padding:2rem;}


.pb{padding-bottom: 200px;}

.text-l{text-align: left;
    display: inline-block;
}


/*ここからスマホの表示*/
@media screen and (max-width : 768px){
.of-x{overflow-x: hidden;}
    .sp {
    display: block !important;
  }
  .pc {
    display: none !important;
  }

    #top{
    width:100%;
    margin-top: -50px;
  }
    
    .kyougoku2 img{width:80%;
    margin: auto;}
    
    .rounds{width:100%;}    
    .line{position: sticky;
    top:90%;
width:50%;
 height: 50px;
    margin: auto;
    border-radius: 10px;
background-color: #38BF4D;
    padding-bottom: 1px;
    color:white;
    letter-spacing: .6rem;
}
    
.squea{background: #A08017;
border-radius: 10px;
padding:2rem 3rem 2rem 1.5rem;
margin: 0 0 0 1rem;
color:white;
text-align:left;
width:70%;}


    
.kyougoku1{position: absolute;
right:-1rem;
bottom: -100px;}
  
  .kyougoku1 img{max-width:250px;}
   
    .calam2m{width:100%;  
    margin-bottom: 2rem;
}

    .prohivit{background-color: #3E3A39;
    color:white;
    padding-top: .5rem;
    padding-bottom: .5rem;
    margin: 0;
    width:100vw;}
    footer{margin: 0;
    padding: 0;}
    
  
    .w40s{width:50%;}
    .w60s{width:50%;}
    
    .squea3{padding:1.2rem;}
    
}