@charset "UTF-8";

/*
  ページ別CSS
*/

#2nd-area{
  width: 100%;
  max-width: 100%;
  padding: 0 ;
  margin: 0;
  background: url("../images/bg_tec.jpg") no-repeat left top !important;
  background-size: contain;
}



/***********************************************************
#1 オーバーライド: c-main
***********************************************************/
#c-main {
}

#c-main a.a-linkbtn {
  padding: 0.5em 1.5em;
  font-size: 0.9em;
	margin:  2.0em 0 1.0em ;
	border: solid 1px #333;
	width: inherit;
	color: #333;
	text-decoration: none;
}

#c-main p.p-center {
  text-align: center;
}


#c-main p.p-btn {
  letter-spacing: 0.02em;
  font-weight: 300;
  margin: 2.0em 0 ;
  padding: 0 ;
}
#c-main p.p-btn a:link,
#c-main p.p-btn a:visited {
  font-size:0.9em;
  letter-spacing: 0.05em;
  color: #fff;
  background: #036EB8;
  padding: 0.4em 2.0em 0.6em;
  text-decoration: none;
  display: inline-block;
  font-weight: 600;
  border-radius: 100vw;
}
#c-main p.p-btn a:hover {
  text-decoration: underline;
  background: #999;
}


#c-main p.p-btn02 {
  letter-spacing: 0.02em;
  font-weight: 300;
  margin: 2.0em 0 0 ;
  padding: 0 ;
}
#c-main p.p-btn02 a:link,
#c-main p.p-btn02 a:visited {
  font-size:0.9em;
  letter-spacing: 0.05em;
  color: #000;
  background: #ffff00;
  padding: 0.4em 2.0em 0.6em;
  text-decoration: none;
  display: inline-block;
  font-weight: 600;
  border-radius: 100vw;
}
#c-main p.p-btn02 a:hover {
  text-decoration: underline;
  background: #000;
  color: #fff;
}



/*//////////////////
#4 レスポンシブ（タブレット用）
//////////////////*/
@media screen and (max-width: 768px) {
}


/*//////////////////
#4 レスポンシブ（スマートフォン用）
//////////////////*/
@media screen and (max-width: 640px) {

#c-main p.p-btn {
  margin: 2.0em 0 0 ;
  text-align: center;
}	

#c-main p.p-btn02 {
  margin: 2.0em 0 0 ;
  text-align: center;
}	

#c-main p.p-center {
  text-align: left;
}

}

/***********************************************************
#1 TOPページ about
***********************************************************/
#c-main .box-about {
  padding: 1.0em 0 3.0em ;
  margin:0 auto;
  width: 100%;
  max-width: 100%;
  background: #036EB8;
}
#c-main .box-about-base {
  padding: 0 ;
  margin:0 auto;
  width: 75vw;
  max-width: 100%;
}

#c-main .box-about h2.h2-about {
  text-align: center;
  font-weight: 800;
  font-size: 3.0em;
  color: #ffff00;
  margin: 1.0em 0 0.2em ;
  padding: 0 ;
}

#c-main .box-about h3.h3-about {
  text-align: center;
  font-weight: 800;
  font-size: 1.6em;
  color: #fff;
  margin: 0.5em 0 0.3em;
  padding: 0 ;
}


#c-main .col-movie {
  padding: 0 ;
  margin:2.0em auto ;
  width: 73vw;
  max-width: 96%;
}

#c-main .box-about-inner00 {
  padding: 0 ;
  margin:5.0em auto 2.0em;
  width: 73vw;
  max-width: 100%;
  color: #fff;
  font-size: 1.2em;
}

#c-main .box-about h2.h2-catch {
  margin: 2.0em auto 0.8em ;
  font-weight: 800;
  font-size: 1.4em;
  color: #000;
  padding: 10px 0.5em ;
  background: #fff;
  text-align: center;
  border: solid 5px #000;
}

#c-main .box-about h2.h2-catch02 {
  margin: 2.0em auto 1.5em ;
  padding: 0 ;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

#c-main .box-about h2.h2-catch02 .front {
  font-weight: 800;
  font-size: 0.6em;
  color: #000;
  margin: 0 ;
  padding: 15px 1.2em ;
  background: #ffff00;
  text-align: center;
  letter-spacing: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: 1.5em;
}

#c-main .box-about h2.h2-catch02 .front02 {
  font-weight: 800;
  font-size: 0.6em;
  color: #000;
  margin: 0 ;
  padding: 30px 1.2em ;
  background: #ffff00;
  text-align: center;
  letter-spacing: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: 1.5em;
}

#c-main .box-about h2.h2-catch02 .front .mum {
  font-family: 'susanoo';
  font-size: 2.2em;
  font-weight: 200;
  line-height: 1.0em;
}

#c-main .box-about h2.h2-catch02 .front .text {
  font-size: 0.8em;
  line-height: 1.0em;
}
#c-main .box-about h2.h2-catch02 .front02 .text {
  font-size: 1.0em;
  line-height: 1.2em;
}


#c-main .box-about h2.h2-catch02 .front .susatama01,
#c-main .box-about h2.h2-catch02 .front02 .susatama01 {
  position: absolute;
  bottom: 0;
  left: -90px;
}

#c-main .box-about h2.h2-catch02 .front .susatama01 img,
#c-main .box-about h2.h2-catch02 .front02 .susatama01 img {
  height: 150px;
}


#c-main .box-about h2.h2-catch02 .back {
  margin: 0 0 0 10px ;
  padding: 0 0 6px 0 ;
  text-align: left;
}

#c-main .box-about h2.h2-catch02 .back .point {
  font-weight: 800;
  font-size: 0.7em;
  color: #000;
  margin: 0 auto 0 0 ;
  padding: 8px 1.0em ;
  background: #ffff00;
  text-align: center;
  display: inline-block;
  line-height: 1.0em;
  border: solid 5px #000;
  border-bottom: none;
}
#c-main .box-about h2.h2-catch02 .back .comment {
  font-weight: 800;
  font-size: 0.7em;
  color: #000;
  margin: 0 ;
  padding: 5px 1.0em ;
  background: #fff;
  text-align: center;
  display: block;
  border: solid 5px #000;
}

#c-main .box-about h3.h3-time {
  text-align: center;
  font-weight: 800;
  font-size: 2.0em;
  color: #000;
  margin: 0.5em 0 1.0em;
  padding: 0 0 0.8em ;
  position: relative;
}

#c-main .box-about h3.h3-time::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0 ;
  width: 100%;
  height: 5px;
  background: linear-gradient(
    to right, 
    #036EB8 0%, #036EB8 50%, /*青*/
    #fabe00 50%, #fabe00 100% /*黄色*/
  );
}

#c-main .box-about h4.h4-time {
  font-weight: 800;
  font-size: 2.3em;
  color: #036EB8;
  margin: 0.5em 0 0.5em;
  padding: 0 ;
}


#c-main .box-about-inner {
  padding: 1.0em 2.0em 1.0em ;
  margin:0 0 2.0em;
  width: 100%;
  max-width: 100%;
  background: #fff;
  border-radius: 0.5em;
}

#c-main .col-contents{
  padding: 0;
  margin: 0 auto 0 ;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

#c-main .col-contents-l{
  padding: 0 0.5em 1.0em;
  margin: 0 0 1.0em ;
  width: 60%;
  max-width: 100%;
}

#c-main .col-contents-l h4{
  font-weight: 800;
  font-size: 1.8em;
  line-height: 1.3em;
  color: #036EB8;
  margin: 0 0 0.5em;
  padding: 0 ;
}

#c-main .col-contents-l p{
  font-weight: 600;
  font-size: 1.1em;
  line-height: 1.6em;
}

#c-main .col-contents-l p.photo{
  width: 300px;
}


#c-main .col-contents-r{
  padding: 0 40px 1.0em;
  margin: 0 0 1.0em ;
  width: 38%;
  max-width: 100%;
}

#c-main .col-contents-r ul{
  padding: 0 !important;
  width: 80%;
  max-width: 80%;
  margin: 0 auto !important;
}



#c-main .col-contents02{
  padding: 1.0em;
  margin: 1.5em auto 0 ;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  background: #036EB8;
  border-radius: 1.0em;
}

#c-main .col-contents02-l{
  padding: 0 0.5em 1.0em;
  margin: 0 ;
  flex-basis: 73%;
  max-width: 100%;
}

#c-main .col-contents02-l h4{
  font-weight: 800;
  font-size: 1.5em;
  line-height: 1.3em;
  color: #ffff00;
  margin: 0 0 0.5em;
  padding: 0 ;
}

#c-main .col-contents02-l p{
  font-weight: 600;
  font-size: 1.1em;
  line-height: 1.6em;
  color: #fff;
}

#c-main .col-contents02-r{
  padding: 0 ;
  margin: 0  ;
  flex-basis: 25%;
  max-width: 100%;
}



/* 両方の矢印の色を変更 */
.slick-prev::before,
.slick-next::before {
    color: #000 !important; /* ◀ お好きな色に変更（例: #fff, black など） */
	padding: 0 ;
}
.slick-prev{
    left: 5px;
}

.slick-next {
    right: 5px;
}


#c-main p.p-btn03 {
  letter-spacing: 0.02em;
  font-weight: 300;
  margin: 2.0em 0 ;
  padding: 0 ;
}
#c-main p.p-btn03 a:link,
#c-main p.p-btn03 a:visited {
  font-size:1.1em;
  letter-spacing: 0.05em;
  color: #000;
  border: solid 4px #000;
  padding: 0.4em 3.0em 0.6em;
  text-decoration: none;
  display: inline-block;
  font-weight: 700;
  background: #ffff00;
  border-radius: 100vw;
}




/*//////////////////
#4 レスポンシブ（タブレット用）
//////////////////*/
@media screen and (max-width: 768px) {
}


/*//////////////////
#4 レスポンシブ（スマートフォン用）
//////////////////*/
@media screen and (max-width: 640px) {

#c-main .box-about-base {
  padding: 0 ;
  margin:0 auto;
  width: 90vw;
  max-width: 100%;
}

#c-main .col-movie {
  margin:1.0em auto ;
  width: 90%;
}
	
	
#c-main .box-about h2.h2-about {
  font-size: 1.5em;
}

#c-main .box-about h3.h3-about {
  font-size: 1.2em;
}

#c-main .box-about-inner00 {
  margin:3.0em auto 1.0em;
  width: 90vw;
  font-size: 1.0em;
}

#c-main .box-about h2.h2-catch {
  font-size: 1.5em;
}

#c-main .box-about h2.h2-catch02 {
  margin: 3.0em auto 0 ;
  flex-direction: column;
}


#c-main .box-about h2.h2-catch02 .front {
  font-size: 1.0em;
  margin: 0 0 1.5em ;
  padding: 10px 1.2em ;
  display: block;
  border-radius: 0;
  width: 100%;
}

#c-main .box-about h2.h2-catch02 .front02 {
  font-size: 1.0em;
  margin: 0 0 1.5em ;
  padding: 10px 1.2em ;
  display: block;
  border-radius: 0;
  width: 100%;
}


#c-main .box-about h2.h2-catch02 .front .text {
  font-size: 1.1em;
  line-height: 1.0em;
}
#c-main .box-about h2.h2-catch02 .front02 .text {
  font-size: 1.0em;
  line-height: 1.2em;
}


#c-main .box-about h2.h2-catch02 .front .susatama01,
#c-main .box-about h2.h2-catch02 .front02 .susatama01 {
  position: absolute;
  bottom: 3px;
  left: 10px;
}

#c-main .box-about h2.h2-catch02 .front .susatama01 img,
#c-main .box-about h2.h2-catch02 .front02 .susatama01 img {
  height: 100px;
}	
	

#c-main .box-about h2.h2-catch02 .back {
  margin: 0 0 0 0 ;
  padding: 0 0 0 0 ;
  text-align: left;
  width: 100%;
}

#c-main .box-about h2.h2-catch02 .back .point {
  font-size: 0.9em;
}
#c-main .box-about h2.h2-catch02 .back .comment {
  font-size: 0.9em;
}
	
	

#c-main .box-about h3.h3-time {
  text-align: left;
  font-size: 1.1em;
  line-height: 1.4em;
}

#c-main .box-about h4.h4-time {
  font-size: 1.2em;
  color: #036EB8;
}


#c-main .box-about-inner {
  padding: 1.0em 1.0em 1.0em ;
  margin:0 0 2.0em;
  width: 100%;
  max-width: 100%;
  background: #fff;
  border-radius: 0.5em;
}	
	
#c-main .col-contents{
  padding: 0;
  margin: 0 auto 0 ;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
}

#c-main .col-contents-l{
  padding: 0 0.5em 1.0em;
  margin: 0 0 1.0em ;
  width: 100%;
  max-width: 100%;
}

#c-main .col-contents-l h4{
  font-weight: 800;
  font-size: 1.8em;
  line-height: 1.3em;
  color: #036EB8;
  margin: 0 0 0.5em;
  padding: 0 ;
}

#c-main .col-contents-l p{
  font-weight: 600;
  font-size: 1.1em;
  line-height: 1.6em;
}


#c-main .col-contents-r{
  padding: 0 20px 1.0em;
  margin: 0 0 2.0em ;
  width: 100%;
  max-width: 100%;
}

#c-main .col-contents-r ul{
  padding: 0 !important;
  width: 80%;
  max-width: 80%;
  margin: 0 auto !important;
}

	
#c-main .col-contents02{
  margin: 0.5em auto 0 ;
  flex-direction: column-reverse;
}

#c-main .col-contents02-l{
  padding: 0 0.5em 1.0em;
  margin: 0 ;
  max-width: 100%;
}

#c-main .col-contents02-l h4{
  font-size: 1.1em;
  line-height: 1.3em;
}

#c-main .col-contents02-l p{
  font-size: 0.9em;
  line-height: 1.2em;
}

#c-main .col-contents02-r{
  margin: 0 0 1.0em  ;
}

	
	
.slick-prev{
    left: 0;
}

.slick-next {
    right: 0;
}


#c-main p.p-btn03 {
  letter-spacing: 0.02em;
  font-weight: 300;
  margin: 2.0em 0 ;
  padding: 0 ;
}
#c-main p.p-btn03 a:link,
#c-main p.p-btn03 a:visited {
  font-size:1.1em;
  letter-spacing: 0.05em;
  color: #000;
  border: solid 4px #000;
  padding: 0.4em 1.5em 0.6em;
  text-decoration: none;
  display: inline-block;
  font-weight: 700;
  background: #ffff00;
  border-radius: 100vw;
}



}




/***********************************************************
#1 TOPページ モーダルエリア
***********************************************************/

/*全て共通：hideエリアをはじめは非表示*/
.hide-area{
  display: none;
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
  background:#ccc;  
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
  background:#666;
}

/*動画表示のモーダル：余白を変更したい場合*/
.modaal-video .modaal-inner-wrapper{
  padding:0;
  background: #000;
}

/*以下はコンテンツ内のレイアウト*/
.info-list dl,
.gallery-list{
  display: flex;
}

.info-list dt{
  margin:0 10px 0 0;
}

.gallery-list li{
  margin:0 10px 0 0;
}

.modaal-container {
    color: #666;
    max-width: 60vw;
    background: #fff;
	padding: 0;
}

.modaal-content-container {
	padding: 0;
}

.modaal-container .col-modaal {
  width: 100%;
  max-width: 100%;
  margin: 0 ;
  padding: 1.5em 1.0em ;
}

.modaal-close {
  top:90%;
}

/*//////////////////
#4 レスポンシブ（スマートフォン用）
//////////////////*/
@media screen and (max-width: 640px) {

.modaal-container {
    max-width: 80vw;
}

.modaal-container .col-modaal {
  flex-direction: column;
}

}