/*
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
　共通設定 start
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
*/

:root {

/*
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
　カラー設定
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
*/

--black: #000;
--white: #fff;

--mainColor-001: #000;
--mainColor-002: #531513;
--mainColor-003: #4b4a4a;
--mainColor-004: #dbdbdb;
--mainColor-005: #f1f0f0;

/* フッターフォントカラー */
--footer-font-color: #fff;

/*
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
　大きさ設定
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
*/

--PC_width: 1200px;
--MB_width: 650px;

--PC_header_height: 135px;
--MB_header_height: 80px;
--footer_height: 450px;


}

* {
padding: 0px ; 
margin: 0;
}

html {
height: 100%;
width: 100%;
}

body {
background-image:url(../img/back.jpg);
width: 100%;
-webkit-text-size-adjust: 100%;
}

.hide {
display: none;
}

/* ▼-----リンク色の変更-----▼ */
a:link{
  color: var( --green ); /* 未訪問のリンク色 */
  text-decoration: none; /* アンダーラインなし */
}
a:visited{
  color: var( --green ); /* 訪問済みのリンク色 */
  text-decoration: none; /* アンダーラインなし */
}
a:hover{
  color: var( --lblue );  /* カーソルが乗った時の色 */
  text-decoration: underline; /* アンダーラインあり */
}

/* ▲-----リンク色の変更-----▲ */




@import url('https://fonts.googleapis.com/css2?family=Cambo&family=Merriweather:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');


/*
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
テーブル 共通
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
*/

table {
  width: 800px;
  font-size:14px;
  margin: 50px auto 0 auto;
  border-collapse: collapse;
  }
  
  th, td {
  padding: 10px 15px;
  border: 1px solid var( --mainColor-004 );
  }

  td p {
    font-size:12px;
  }
  
  
  th {
  background: var( --mainColor-003 );
  color: var( --white );
  }
  


  td {
  background: var( --white );
  }

  /*
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
解像度特小　0～979　※モバイル用
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
*/

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

  table {
    width: 600px;
    }
  
  
  }


/*close
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
　ハンバーガーメニュー- header start
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
*/


div#HM-list {
background: rgba(0,0,0,0.8);
position: fixed;
z-index: 20;
width: 100%;
}

div#HM-list hr{
margin: 50px 0;
}

div#HM-list input{
color: var( --white );
font-size: 30px;
font-family: 'Shippori Mincho B1', serif;
margin: 0 30px;
background-color: transparent;
border-color: transparent;
outline: none;
padding-right: 700px;
}

div#HM-list p img{
margin: 14px 12px 0;
}

div#HM-list p.top{
height: 50px;
text-align: right;
}


/*close
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
　トップロゴ・ボタン start
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
*/

header {
position: sticky;
top: 0;
z-index: 10;
height: var( --PC_header_height );
text-align: center;
background: var( --white );
}

/* トップロゴ  */
header img {
margin-top: 11px;
}

/* ハンバーガーメニューボタン  */
header .HM-open {
position: absolute;
right: 20px;
bottom: 7px;
display: none;
}


/*
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
解像度特小　0～979　※モバイル用
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
*/

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

header {
height: var( --MB_header_height );
}

/* トップロゴ  */
header img {
margin-top: 15px;
}


/* ハンバーガーメニューボタン  */
header .HM-open {
display: block;
}


}

/*close
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
　トップイメージ　-　ボタン start
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
*/

div#topbtn {
position: absolute;
bottom: 0;
width: 100%;
background: var( --mainColor-001 );
}

#topbtn section {
margin: 0 auto;
background: var( --mainColor-001 );
display: table;
table-layout: fixed;
border-collapse: collapse;
text-align: center;
width: var( --PC_width );
}



#topbtn button {
padding: 10px 0;
text-decoration: none;
color: var( --white );
transition: .4s;
font-size: 14px;
font-weight: 500;
outline: none;
background: var( --mainColor-001 );
width: 100%;
border: none;
letter-spacing: 2px;
}

#topbtn form {
display:table-cell;
border: 1px solid #2e2e2e;
}

#topbtn p {
color: var( --mainColor-004 );
font-size: 11px;
margin-top: 5px;
}

#topbtn button:hover {
color: var( --white );
background: var( --mainColor-002 );
cursor: pointer;
}

#topbtn button:disabled {
background: var( --mainColor-003 );
color: var( --white );
cursor: default;
}

/*
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
解像度特小　0～979　※モバイル用
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
*/

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

div#topbtn {
display: none;
width: 650px;
}


}

/*close
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
　メインエリア start
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
*/

#main {
width: 100%;
min-height: calc(100vh - var( --PC_header_height ) - var( --footer_height ));

display: grid;
grid-template-rows: auto auto auto auto 1fr;

background: var( --white );
}

div#topImage {
position: relative;
background-image:url(../img/top_image-pc.png);
background-repeat:  no-repeat;
background-position:center center;/* 画像の表示位置を指定  */
background-size:100%;
height: 550px;
}

/* スローガン */
div#topImage section.part1 {
  position: absolute;
  right: 13%;
  top: 250px;
  width: auto;
}






div#topImage p {
font-size: 30px;
font-family: 'Shippori Mincho B1', serif;
margin-left: 5px;
color: var( --white );
}


/* ▲-----スローガン-----▲ */


#main article {
width: 1200px;
margin: 0 auto;
background: var( --white );
}


#main article.way3 {
  width: 100%;
  margin: 70px auto 0 auto;
  background: var( --mainColor-004 );
  text-align: center;
  padding: 60px 0;
}

#main article.way3.white {
  margin: 0 auto;
  background: var( --mainColor-005 );
  padding: 60px 0 0 0;
}

/*
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
　見出しタイトル
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
*/





h3 {
  width: 1145px;
  text-align: left;
  margin: auto;
  background-image:url(../img/image_headLogo.svg);
  background-repeat:  no-repeat;
  background-position: left 5px top 55px;
  height: 60px;
  padding: 60px 0 0 55px;
  font-size: 22px;
  color: #3E3A39;
}







/*
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
　BOX
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
*/



#main article section.way2 {
  width: 1200px;
  display: grid;
  grid-template-columns: 700px 500px;
  grid-template-rows: 430px;
}
  
.way2 img {
  margin: 0;
}
  
.way2 div.photo {

}




#main article p.text, p.step_text {
   font-size: 16px;
   padding: 45px 15px 15px 0;
   line-height:30px;
}

p.step_text {
  padding: 35px 15px 25px 0;
}


.way3 h4 {
  color: #4B4848;
  margin-bottom: 50px;
  font-size: 25px;
}

.way2 button, .way3 button {
  color: var( --white );
  background: #4B4848;
  width: 280px;
  height: 60px;
  margin-bottom: 31px;
  border: none;
  outline: none;
  margin: 20px 0;
  border-radius: 30px;
  font-size: 18px;
  cursor: pointer;
}

.way2 button.step {
  width: 180px;
}

.way2 button.step:disabled {
  background: var( --mainColor-003 );
  color: #757474;
  cursor: default;
  }

.way2 button:hover, .way3 button:hover {
  background: #661f1f;
}

.way3 p {
  color: #4B4848;
  font-size: 16px;
}

.way3 div.simple p {
  color: #4B4848;
  font-size: 20px;
  margin-top: 10px;
}

.way3 div.white p {
  color: #4B4848;
  font-size: 18px;
  margin-top: 10px;
}



.way3 div {
  width: 1080px;
  display: grid;
  grid-template-columns: 300px 90px 300px 90px 300px;
  grid-template-rows: 380px;
  margin: 0 auto;
}

.way3 div.simple {
  grid-template-rows: 280px;
}

.way3 div.white {
  grid-template-rows: 280px 280px;
}

p.list {
  line-height:40px;
}







  /*
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
解像度特小　0～979　※モバイル用
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
*/

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

  div#topImage {
    background-image:url(../img/top_image-mb.png);
    }

    div#topImage section.part1 {
      position: absolute;
      right: 30%;
      top: 250px;
      width: auto;
    }

    div#topImage section.part1 {
      top: 25px;
      left: auto;
      }

      div#topImage p {
        font-size: 23px;
        }

}

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

  #main article p.text, p.step_text {
    padding: 15px 0 15px 0;
 }

p.list {
  padding: 30px 0 0 0;
}

  .way2 button {
    margin: 0 auto;
    width: 480px;
  }

  .way2 div {
    text-align: center;
  }

  .way2 p {
    text-align: left;
  }

  h3 {
    width: 575px;
    padding: 60px 0 0 55px;
    margin-left: 15px;
  }

  #main {

    }


  #main article section.way2 {
    width: 650px;
    grid-template-columns: 650px;
    grid-template-rows: 430px;
  }

  #main article.way3 {
    width: 650px;
  }

  .way3 div {
    width: 620px;
    grid-template-columns: 300px 20px 300px;
    grid-template-rows: 380px 380px;
    margin-left: 15px;
  }

  .spacer {
    grid-row: 2;
    grid-column: 2;
  }

  .spacer1 {
    grid-row: 2;
    grid-column: 2;
  }

  #main article.way3.white {
    padding: 15px 0;
  }
  
  
}





/*
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
　BOX - 業務内容
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
*/
#main div#way4 {
display: grid;
grid-template-columns: 550px 325px 325px;
grid-template-rows: 200px 150px;
background: var( --white );
}

a.area01, section.area01 {
grid-row: 1 / 3;
grid-column: 1;
background-image:url(../img/technicalStaff.jpg);
background-repeat:  no-repeat;
padding: 45px 150px 35px 35px;
}

section.area01.change02 {
background-image:url(../img/technicalStaff2.jpg);
}

section.area02, a.area02 {
grid-row: 1;
grid-column: 2 / 4;
background-image:url(../img/advanceStaff_back.jpg);
background-repeat:  no-repeat;
padding: 45px 0 0 35px;
}

section.area03, a.area03 {
background: var( --mainColor-001 );
background-image:url(../img/op-logo01.png);
background-repeat:  no-repeat;
padding: 24px 0 0 130px;
}

section.area04, a.area04 {
background: var( --mainColor-002 );
background-image:url(../img/op-logo02.png);
background-repeat:  no-repeat;
padding: 24px 0 0 130px;
}

.gyoumu section.area03, .gyoumu section.area04 {
grid-column: 1 / 3;
}

section.support-ex {
background: #efefef;
padding: 25px;
}


a.area01, a.area02, a.area03, a.area04 {
transition: all .3s;
}

a.area01:hover, a.area02:hover, a.area03:hover, a.area04:hover {
text-decoration: none; 
opacity: 0.8;
cursor: pointer;
}



/* ナンバー */
section p.num, div p.num {
font-family: 'Sora', sans-serif;
font-size: 25px;
}


/* ナンバー下 - タイトル */
section p.title, div p.title {
font-size: 23px;
margin-top: -10px;
color: var( --mainColor-002 );
}

div p.title.color04 {
color: var( --white );
}

div p.title.small {
font-size: 20px;
}

/* ナンバー下 - サブタイトル */
section p.sub-title, div p.sub-title {
font-size: 15px;
padding-bottom: 25px
}

/*
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
　BOX - 会社概要
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
*/
#main div#way2 {
display: grid;
grid-template-columns: 650px 550px;
}

section.conpany {
padding: 90px 0 0 180px;
}

section.conpany p.title {
font-size: 20px;
margin: 30px 0 15px 0;
}


section.conpany p.sub-title {
line-height: 30px;
}

img.company {
  width: 800px;
  margin: 50px auto 0;
}


.pc { display: block !important; }
.mb { display: none !important; }


/*
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
解像度特小　0～979　※モバイル用
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
*/

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




section.conpany {
padding: 0;
padding-top: 40px;
text-align: center;
}

.pc { display: none !important; }
.mb { display: block !important; }

#main article p.text, p.step_text, p.list  {
font-size: 18px;
margin: 0 40px;
line-height:30px;
}

p.list_text  {
  font-size: 18px;
  margin: 0 40px 30px;
  line-height:30px;
  }


a p {
font-size: 21px;
padding-right: 100px;
//line-height:150px;
}

/* ナンバー下 - サブタイトル */
section p.sub-title {
font-size: 15px;
padding-bottom: 15px
}

section p.sub-title {
padding-bottom: 15px
}


section p.title {
font-size: 15px;
}

/* ナンバー */
section p.num, div p.num {
font-size: 30px;
}



#main {
//min-height: calc(100vh - var( --MB_header_height ) - var( --footer_height ));
}

#main div#way2 {
display: grid;
grid-template-columns: 650px;
}

div#topImage {
height: 400px;
}

div#topImage section {
text-align: center;
width: 100%;
}



div#topImage section.part2 {
top: 335px;
right: 0;
}

div#topImage img {
left: calc(50% - 115px);
top: 75px;
width: 300px;
}




#main article {
width: var( --MB_width );
}




#main h2 {
font-size: 25px;
}


#main div#way4 {
display: grid;
grid-template-columns: 650px;
grid-template-rows: 414px 200px 150px 150px;
background: var( --white );
}

a.area02 {
grid-row: 2;
}

a.area01, a.area02, a.area03, a.area04, .gyoumu section.area03, .gyoumu section.area04  {
grid-column: 1;
}

img.company {
  width: 600px;
}





}

/*close
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
ビデオ通話 start
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
*/

object#video{
background: #2879cb;
height: calc(100% - 135px);
width: 100%;
}


/*close
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
業務内容 start
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
*/

#main a#way2-L, #main a#way2-R {
background: var( --mainColor-003 );
}

#main a#way2-L, #main div#way2-L {
display: grid;
grid-template-columns: 550px 650px;
grid-template-rows: 350px;
}

#main a#way2-R, #main div#way2-R {
display: grid;
grid-template-columns: 650px 550px;
grid-template-rows: 350px;
}

#main a#way2-L:hover, #main a#way2-R:hover {
text-decoration: none; 
opacity: 0.8; filter: brightness(110%)
}

section.bis01 {
background-image:url(../img/technicalStaff.jpg);
background-repeat:  no-repeat;
padding: 20px 200px 35px 35px;
}

section.bis02 {
background-image:url(../img/technicalStaff2.jpg);
background-repeat:  no-repeat;
padding: 25px 160px 35px 35px;
}

section.bis03 {
background-image:url(../img/vg.jpg);
background-repeat:  no-repeat;
padding: 25px 160px 35px 35px;
}



section.space {
padding: 105px 0 0 60px;
}

section.space p {
color: var( --white );
}

section.space p.num {
font-size: 35px;
color: var( --mainColor-002 );
}

#target3.gyoumu div {
display: grid;
grid-template-columns: 550px 650px;
grid-template-rows: 150px 350px;
}

#target4.gyoumu div {
display: grid;
grid-template-columns: 650px 550px;
grid-template-rows: 150px 350px;
}

article.gyoumu .text {
margin: 0 60px;
padding-top: 30px;
}


#main article.addition section {
margin: 30px 30px 0;
padding: 15px 20px;
border: 1px solid #b2b2b2;
}

.orange {
color: var( --mainColor-002 );
font-size: 17px;
}

hr {
height: 0;
margin: 0;
padding: 0;
border: 0;
overflow: visible;
}
hr {
border: none;
border-top: dotted 1px #b2b2b2;
margin: 10px 0;
}


span.line {
line-height: 35px
}

/*
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
解像度特小　0～979　※モバイル用
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
*/

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

#main a#way2-L, #main div#way2-L, #main a#way2-R, #main div#way2-R  {
grid-template-columns: 650px;
grid-template-rows: 414px 350px;
}

section.bis02 {
grid-row: 1;
//grid-column: 2 / 4;
}

article.addition.wey {
font-size: 17px;
line-height: 32px
}

article.addition {
font-size: 20px;
}

p.des {
font-size: 18px;
width: 350px;
}


section p {
font-size: 14px;
}

section p.jogai {
}

.orange {
font-size: 18px;
}

span.line {
font-size: 13px;
line-height: 45px
}

#target3.gyoumu div, #target4.gyoumu div  {
grid-template-columns: 650px;
grid-template-rows: 150px 350px;
}

.change01 {
grid-row: 2;
}

}





/*close
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
footer start
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
*/

footer {
position:relative;
background: #b8b8b8;
width: 100%;
height: var( --footer_height );
text-align: center;
}

footer img {
 margin: 50px 0 20px;
}

footer a {
font-size: 16px;
}

footer section {
margin: 0 auto;
width: 650px;
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: 40px 40px 40px 40px;
padding-top: 30px;
text-align: left;
}


footer form {
width: auto;
border-left:  1px solid var( --footer-font-color );
padding-left: 20px;
font-size: 13px;
color: var( --footer-font-color );
}

footer a:link, footer p {
color: var( --footer-font-color );
}

footer a:link {
text-decoration: none; /* アンダーラインなし */
}
footer a:visited {
text-decoration: none; /* アンダーラインなし */
}
footer a:hover {
text-decoration: underline; /* アンダーラインあり */
}

/* コピーライト */
footer div {
margin: 0 auto;
background: var( --black );
color: #fff;
width: 100%;
text-align: center;
padding: 15px 0;
margin-top: 25px;
position: absolute;
bottom: 0;
}




/*
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
解像度特小　0～979　※モバイル用
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
*/

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

footer a {
font-size: 14px;
}

footer form {
padding-left: 5px;
font-size: 13px;
}

footer section {
width: 550px;
}

footer form {
font-size: 16px;
}


}

/*close
/*
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■
フォーム
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■
*/


section#form {
background: var( --white );
margin: 0 10px;
color: var( --black );
padding: 0 50px;
}



#form input[type="text"], #form input[type="password"], #form select, textarea {
border: 1px solid #d0d0d0;
border-radius: 3px;
color: var( --black );
padding: 5px 10px;
}

textarea {
width: 650px;
}

#form p:not(.error) {
font-size: 14px;
color: var( --black );
}


#form p.itemText {
font-size: 16px;
margin: 10px 0 2px 2px;
}


#form button, #form input[type="submit"], #form input[type="button"] {
color: var( --white );
padding: 10px 20px;
margin: 5px 0 15px;
background: var( --mainColor-003 );
border-radius: 3px;
border: 1px solid #d0d0d0;
transition: .4s;
outline: none;
}

#form button:hover, #form input[type="submit"]:hover, #form input[type="button"]:hover  {
background: var( --mainColor-002 );
cursor: pointer;
}

#form button:disabled, #form input[type="submit"]:disabled, #form input[type="button"]:hover  {
background: #d0d0d0;
color: var( --white );
cursor: default;
}

.top_space {
margin-top: 10px;
}

#mes {
font-size: 16px;
margin: 15px 0;
}

.error {
color: var( --mainColor-002 );
}

.pink {
background: #fcf7f2;
}

iframe.video {
width: 800px;
height: 450px;
}


/*
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
解像度特小　0～979　※モバイル用
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□■□
*/

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

iframe.video {
width: 592px;
height: 333px;
}

section#form {
padding: 10px;
}

#form p.itemText {
font-size: 18px;
}

#form p:not(.error) {
font-size: 18px;
margin-bottom: 15px;
}

textarea {
width: 610px;
}


}