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

html{
  font-size: 62.5%;
}
body{
  font-family: "maru-maru-gothic-clr-stdn", 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:center;
}
.flex-rs{
  display: flex;
  justify-content:flex-start;
}

/*flex設定*/

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

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


.fadeIn {
        opacity: 1;
}
    


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

.section-title{
	max-width: 80%;
	font-size: 1.5rem;
	margin: 5% auto 0% auto;
	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;
	margin-top: 3%;
	height: 30vh;
	text-align: left;
}


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

/* -------------------------- */
/* marginの基本設定
/* -------------------------- */

.basic_margin{
	margin: 5% 0 10% 0;
}

/* -------------------------- */
/* //marginの基本設定
/* -------------------------- */

/* -------------------------- */
/* 制作物の説明
/* -------------------------- */

.caption_txt{
	font-family: "maru-maru-gothic-clr-stdn", sans-serif;
    font-weight: 400;
    font-style: normal;
}
.link_a{
	line-height: 3em;
	letter-spacing: 0.1em;
}

.link_a a{
	color: #0000FF;
}

/* -------------------------- */
/* //制作物の説明
/* -------------------------- */



/* -------------------------- */
/* Color
/* -------------------------- */


.width_50{
	max-width: 50%;
}


.color1{
	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%;
	width: 100px;
    height: 100px;
    line-height: 100px;
	text-align: center;
	border: 1px solid #303030;
	border-radius: 100%;
}


.color2 {
	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%;
	width: 100px;
    height: 100px;
    line-height: 100px;
	text-align: center;
	border: 1px solid #303030;
	border-radius: 100%;
}

.color3 {
	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%;
	width: 100px;
    height: 100px;
    line-height: 100px;
	text-align: center;
	border: 1px solid #303030;
	border-radius: 100%;
}

/* -------------------------- */
/* //Color
/* -------------------------- */

/* -------------------------- */
/* video/images contents
/* -------------------------- */

/*.video-contents{
	position: fixed;
	z-index: 1;
}*/

.images-contents{
	margin:auto;
	max-width: 50%;
}

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

/* -------------------------- */
/* 矢印
/* -------------------------- */
.arrow {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 2.8px;
  margin-top: 29px;
  border-radius: 9999px;
  background-color: #ff6c4a;
}

.arrow::before {
  content: "";
  position: absolute;
  top: calc(50% - 2px);
  left: 0;
  width: 30px;
  height: 2.8px;
  border-radius: 9999px;
  background-color: #ff6c4a;
  transform: rotate(-45deg);
  transform-origin: 2px 50%;
}
/* -------------------------- */
/* //矢印
/* -------------------------- */
/* -------------------------- */
/* contact_btn
/* -------------------------- */

.contact{
    text-align: center;
}


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

.color_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;
}

.contactbtn:hover{
	opacity: 0.5;
}
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;
	font-size: 16px;
	color: #303030;
	margin: 10% 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;
}

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

.line-wrapper{
}
/* ----------------------------------------------------------------スマホ版 */

@media screen and (max-width:500px){
/* -------------------------- */
/* sp-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:center;
}
.flex-rs{
  display: flex;
  justify-content:flex-start;
}

/*flex設定*/

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

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

.section-title{
    opacity: 0;
}

.fadeIn {
        opacity: 1;
}
    


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

.section-title{
	max-width: 80%;
	margin: 5% auto 0% auto;
	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;
	margin-top: 3%;
	height: 30vh;
	text-align: left;
}



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

/* -------------------------- */
/* sp-marginの基本設定
/* -------------------------- */

.basic_margin{
	margin: 20% 0 25% 0;
}

/* -------------------------- */
/* //sp-marginの基本設定
/* -------------------------- */

/* -------------------------- */
/* sp-制作物の説明
/* -------------------------- */

.caption_txt{
	font-family: "maru-maru-gothic-clr-stdn", sans-serif;
    font-weight: 400;
    font-style: normal;
}
.link_a{
	line-height: 2em;
	letter-spacing: 0.1em;
}

.link_a a{
	color: #0000FF;
}

/* -------------------------- */
/* //sp-制作物の説明
/* -------------------------- */



/* -------------------------- */
/* sp-Color
/* -------------------------- */


.width_50{
	max-width: 100%;
}


.color1{
	font-family: "brandon-grotesque", sans-serif;
    font-weight: 700;
    /* font-style: italic; */
    letter-spacing: 0.05em;
	color: #fff;
    -webkit-text-stroke: 1px #303030;
	position: relative;
	font-size: 3.0rem;
    margin: auto;
	max-width: 80%;
	margin-bottom: 0%;
	width: 50px;
    height: 50px;
    line-height: 50px;
	text-align: center;
	border: 0.5px solid #303030;
	border-radius: 100%;
}


.color2 {
	font-family: "brandon-grotesque", sans-serif;
    font-weight: 700;
    /* font-style: italic; */
    letter-spacing: 0.05em;
	color: #fff;
    -webkit-text-stroke: 1px #303030;
	position: relative;
	font-size: 3.0rem;
    margin: auto;
	max-width: 80%;
	margin-bottom: 0%;
	width: 50px;
    height: 50px;
    line-height: 50px;
	text-align: center;
	border: 0.5px solid #303030;
	border-radius: 100%;
}

.color3 {
	font-family: "brandon-grotesque", sans-serif;
    font-weight: 700;
    /* font-style: italic; */
    letter-spacing: 0.05em;
	color: #fff;
    -webkit-text-stroke: 1px #303030;
	position: relative;
	font-size: 3.0rem;
    margin: auto;
	max-width: 80%;
	margin-bottom: 0%;
	width: 50px;
    height: 50px;
    line-height: 50px;
	text-align: center;
	border: 0.5px solid #303030;
	border-radius: 100%;
}

/* -------------------------- */
/* //sp-Color
/* -------------------------- */

/* -------------------------- */
/* sp-video/imges
/* -------------------------- */

	video{
	width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: 50%; /* コレ */	
	}
	
	.images-contents{
	margin:auto;
	max-width: 100%;
}

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

/* -------------------------- */
/* sp-矢印
/* -------------------------- */
	
	
.arrow {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 1.8px;
  margin-top: 29px;
  border-radius: 9999px;
  background-color: #ff6c4a;
}

.arrow::before {
  content: "";
  position: absolute;
  top: calc(50% - 2px);
  left: 0;
  width: 20px;
  height: 1.8px;
  border-radius: 9999px;
  background-color: #ff6c4a;
  transform: rotate(-45deg);
  transform-origin: 2px 50%;
}
/* -------------------------- */
/* //sp-矢印
/* -------------------------- */
/* -------------------------- */
/* sp-contact_btn
/* -------------------------- */

.contact{
    text-align: center;
}


.color_a{
    font-family: "brandon-grotesque", sans-serif;
    font-weight: 700;
    letter-spacing: 0.05em;
	line-height: 1.5em;
    -webkit-text-stroke: 1px #FF6C4A;
	font-size: 4.0rem;
    color : #fff; 
    transition: .3s;
}

.color_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;
}

.contactbtn:hover{
	opacity: 0.5;
}
span{
    background: #FF6C4A;
    color: #fff;
}

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

/* -------------------------- */
/* sp-Footer
/* -------------------------- */
.infomation-text{
    font-family: "brandon-grotesque", sans-serif;
    font-weight: 700;
    /* font-style: italic; */
    letter-spacing: 0.2em;
	font-size: 10px;
	color: #303030;
	margin: 30% 10% 3% 10%;
}
/* -------------------------- */
/* //sp-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;
}

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

.line-wrapper{
}
}