/* -------------------------- */
/* base
/* -------------------------- */

html{
  font-size: 62.5%;
}
body{
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.6rem;
  color: #333;
  background-color: #FFFFFF;
}
img{
  width: 100%;
  vertical-align: bottom;
}
a{
  text-decoration: none;
  color: #225967;
  letter-spacing: 5%;
  line-height: 23px;
}
ul{
  list-style: none;
}
input{
  border: 0;
  outline: none;
  appearance: none;
  -webkit-appearance:none;
}
textarea{
  border: 0;
  outline: none;
  resize: none;
}
/* -------------------------- */
/* //base
/* -------------------------- */

/* -------------------------- */
/* scroll_meter
/* -------------------------- */


/* スタイルをリセット */
progress{ -webkit-appearance: none; }
 
/* バーの背景色 */
progress::-webkit-progress-bar { background-color: #303030; }

.progress-bar {
  position: fixed;
  top: 3.5%;
  left: 2%;
  /*transform: translate(-50%, -50%);*/
  /*width: calc(100% - 20px);*/
  width: 80px;
  height: 10px; 
  opacity: 0.5;
}
 
/* バーの色 */
progress::-webkit-progress-value { background-color: #FF6C4A; } 
progress::-moz-progress-bar { background-color: #FF6C4A; }
progress::-ms-fill { background-color: #FF6C4A; }


/* -------------------------- */
/* //scroll_meter
/* -------------------------- */

/* -------------------------- */
/* background
/* -------------------------- */

body{
  /*background-image: url("../images/background_2.webp");*/ 
  /*background-image: url("../images/masu_2.webp");	*/
  background-size: cover;
  background-size: 100%;
  background-repeat: repeat;
}

/* -------------------------- */
/* //background
/* -------------------------- */

/* -------------------------- */
/* header
/* -------------------------- */

header{
  padding: 0;
  position: relative;
}

.nav-item{
  max-width: 90px;
}

/*flex設定*/
.flex-rr{
  display: flex;
  justify-content: space-between;
}
.flex-rc{
  display: flex;
  justify-content: space-between;
}
/*flex設定*/

/* ハンバーガーメニュー */
.burger-btn{
  display: none;
}

/* -------------------------- */
/* //header
/* -------------------------- */

.section-title{
    opacity: 0;
}

.fadeIn {
        opacity: 1;
}
    


/* -------------------------- */
/* in common
/* -------------------------- */

.section-title{
	
	font-family: "brandon-grotesque", sans-serif;
    font-weight: 700;
    /* font-style: italic; */
    letter-spacing: 0.05em;
	color: #fff;
    -webkit-text-stroke: 2px #303030;
	position: relative;
	font-size: 6.0rem;
    margin: auto;
	max-width: 80%;
	margin-bottom: 0%;
	text-align: left;
}

.section-slide-title{
	font-family: "brandon-grotesque", sans-serif;
    /* font-style: italic; */
    letter-spacing: 0.5em;
	line-height: 3.0em;
	color: #303030;
	font-size: 1.5rem;
	margin-top: 3%;
	height: 30vh;
	text-align: left;
}

.section-kinds{
	font-family: "brandon-grotesque", sans-serif;
    /* font-style: italic; */
    letter-spacing: 0.5em;
	color: #0000ff;
	position: relative;
	font-size: 1.0rem;
	max-width: 100%;
	writing-mode: vertical-lr;
	margin-top: 3%;
	z-index: 1000;
}


/* -------------------------- */
/* //in common
/* -------------------------- */

/* -------------------------- */
/* loading?
/* -------------------------- */

/*.loading-text {
    position: relative;
    font-family: "brandon-grotesque", sans-serif;
    font-weight: 700;
    font-style: italic
    font-size: 8.0rem;
    color: transparent;
    -webkit-text-stroke: 1px #FF6C4A;
	margin-top: 20%;
	margin-left: 10%;
	margin-bottom: 25%;
}

.loading-text::before {
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    width: 0;
    color: #FF6C4A;
    animation: textSlide 2s infinite linear;
    content: "SCROLL";
}

@keyframes textSlide {
    0% {
        -webkit-text-stroke: 1px #FF6C4A;
        width: 0;
    }

100%,
100% {
    width: 100%;
    -webkit-text-stroke: 0px #FF6C4A;
}

}

/* -------------------------- */
/* //loading?
/* -------------------------- */

/* -------------------------- */
/* video
/* -------------------------- */

.video-contents{
	position: fixed;
	z-index: -1000;
}

/* -------------------------- */
/* //video
/* -------------------------- */

/* -------------------------- */
/* kumazone
/* -------------------------- */

.migihashi{
	z-index: 99999;
	position: fixed;
	bottom: 10%;
	left: 55%;
}

.talk{
	positon: relative;
	width: 500px;
}
.talk-text{
	top: 15%;
	left: 5%;
	position: absolute;
}

.shirokuma{
	z-index: 99999;
    position: absolute;
	top: 87%;
	right: -12%;
	width: 80px;
    transform: rotate(28deg);
}

/* -------------------------- */
/* //kumazone
/* -------------------------- */

/* -------------------------- */
/* contact_btn
/* -------------------------- */
    
.contactbtn-sp{
	display: none;
}
.contactbtn-pc{}

.contact{
    text-align: center;
}

.contact_text_all{
}

.contactbtn_text_1{
    margin-top: 3%;
    margin-bottom: 1.8%;
    font-size: 1.0em;
    letter-spacing: 0.27em;
    word-break: keep-all;
}

.contactbtn_text_2{
    margin-bottom: 2.1%;
    font-size: 1.0em;
    letter-spacing: 0.31em;
    word-break: keep-all;
}

.contactbtn_text_3{
    margin-bottom: 2.1%;
    font-size: 1.0em;
    letter-spacing: 0.18em;
    word-break: keep-all;
}

.contactbtn{
    margin: 7% auto 18% auto;
    }


.contactbtn_a{
    font-family: "brandon-grotesque", sans-serif;
    font-weight: 700;
    letter-spacing: 0.05em;
    -webkit-text-stroke: 2px #FF6C4A;
	font-size: 6.0rem;
    color : #fff; 
    transition: .3s;
}

.contactbtn_a:hover{
  color : #FF6C4A;
}

.contactbtn_text{
    font-family: "maru-maru-gothic-clr-stdn", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.contactbtn_text_contactform{
    margin-top: 2%;
    font-size: 0.8em;
    letter-spacing: 0.1em;
    word-break: keep-all;
}

span{
    background: #FF6C4A;
    color: #fff;
}

/* -------------------------- */
/* //contact_btn
/* -------------------------- */  

/* -------------------------- */
/* Footer
/* -------------------------- */
.infomation-text{
    font-family: "brandon-grotesque", sans-serif;
    font-weight: 700;
    /* font-style: italic; */
    letter-spacing: 0.2em;
	color: #303030;
	margin: 2% 10% 3% 10%;
}
/* -------------------------- */
/* //Footer
/* -------------------------- */

#head {
	background: url("../images/text_1.webp");
	background-repeat: no-repeat;
    background-color: white;
	background-size: 400px;
	width: 450px;
    height: 100px;
    z-index: 1000;
    transition: 1s;
}

#box1 {
  height: 100px;
  width: 100%;
  transition: .3s;
}

#box2 {
  height: 100px;
  width: 100%;
  transition: .3s;
}

#box3 {
  height: 100px;
  width: 100%;
  transition: .3s;
} 


.line_pc{
	margin: 0 auto 21%;
	width: 5%;
}


.line-wrapper{
}

/* ----------------------------------------------------------------吹き出し削除*/

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

.hukidashi{
	display: none;
}
	
.talk-text{
	display: none;
}

.shirokuma{
	display: none;
	}

}

/* ----------------------------------------------------------------スマホ版 */

@media screen and (max-width:428px){
/* -------------------------- */
/* sp_header
/* -------------------------- */

header{
  padding: 8% 9% 2% 10%;
  position: relative;
}

.nav-item{
  max-width: 50px;
  margin-right: 5%;
}

/* -------------------------- */
/* //sp_header
/* -------------------------- */
/* -------------------------- */
/* sp_key-visual
/* -------------------------- */
	
#head{
	background-size: 100%;
	width: 90%;
	height: 80%;
}
	
.migihashi{
	position: fixed;
	margin-right: 10%;
	bottom: 5%;
	left: 10%;
}
	
.talk{
	positon: relative;
	width: 100%;
	margin-right: 10%;
}
	

    

.section-title{
	
    letter-spacing: 0.05em;
	font-size: 4.0rem;
    margin: auto auto 0% auto;
    text-align: center;
}
    
    
#box1 {
  height: 50px;
  width: 100%;
  transition: .3s;
}

#box2 {
  height: 50px;
  width: 100%;
  transition: .3s;
}

#box3 {
  height: 50px;
  width: 100%;
  transition: .3s;
} 
    
    
.progress-bar {
  position: fixed;
  top: 3%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 1px; 
  opacity: 0.5;
  z-index: 1000;
}

 
    
    
/*.line_pc{
  display: none;
}
	
.line_sp {
  width: 50px;
  height: 50px;
  border-radius: 300px;
  background: linear-gradient(145deg, #00B900, #00B900);
  box-shadow:  17px 17px 48px #dcdcdc,
              -17px -17px 48px #dcdcdc;
  margin: 0 auto 100%;
}*/

/*ボタンの押した前*/
/*.line_sp:active {
  background: #ffffff;
  box-shadow: inset 17px 17px 48px #a9a9a9,
              inset -17px -17px 48px #c0c0c0;
}*/
/* -------------------------- */
/* //sp_key-visual
/* -------------------------- */
/* -------------------------- */
/* sp_contact_btn
/* -------------------------- */
  
.contactbtn-pc{
 display: none;
}
.contactbtn-sp{
 display: block;
}
	
.contact{
 text-align: center;
}

.contactbtn_text_1{
 display: none;
}

.contactbtn_text_2{
 display: none;
}

.contactbtn_text_3{
 display: none;
}

.contactbtn{
    margin: 0 auto 65% auto;
    }


.contactbtn_a{
    font-family: "brandon-grotesque", sans-serif;
    font-weight: 700;
    /* font-style: italic; */
    letter-spacing: 0.05em;
    -webkit-text-stroke: 2px #FF6C4A;
	font-size: 4.0rem;
    color : #fff; 
    transition: .3s;
}


.contactbtn_text{
    font-family: "maru-maru-gothic-clr-stdn", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.contactbtn_text_contactform{
    margin-top: 5%;
    font-size: 0.7em;
    letter-spacing: 0.1em;
    word-break: keep-all;
}


/* -------------------------- */
/* //sp_contact_btn
/* -------------------------- */ 
/* -------------------------- */
/* sp_Footer
/* -------------------------- */
.infomation-text{
	font-family: "brandon-grotesque", sans-serif;
    font-weight: 700;
    font-size: 1.0rem;
    /* font-style: italic; */
    letter-spacing: 0.1em;
	color: #303030;
	margin: 2% 10% 3% 10%;
}

/* -------------------------- */
/* //sp_Footer
/* -------------------------- */
}