@charset "utf-8";

/**
 *
 * global: サイト共通
 *
 */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
body { line-height:1;}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { display:block;}
nav ul { list-style:none;}
blockquote, q { quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none;}
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent;}
/* change colours to suit your needs */
ins { background-color:#E0D8BF; color:#000; text-decoration:none;}
/* change colours to suit your needs */
mark { background-color:#E0D8BF; color:#000; font-style:italic; font-weight:bold;}
del { text-decoration: line-through;}
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help;}
table { border-collapse:collapse; border-spacing:0;}
ul {list-style:none;}
ol { list-style-type: none;}
img { width: 100%; max-width: 100%; height: auto; line-height: 0;}
figure { line-height: 0;}
br { line-height: inherit;}

/* change border colour to suit your needs */
hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0;}
input, select { vertical-align:middle;}

*, ::after, ::before { box-sizing: border-box;}

::selection { color:#1d1d1d; background:#E0D8BF; text-shadow:none; opacity:1;}
::-moz-selection { color:#1d1d1d; background:#E0D8BF; text-shadow:none; opacity:1;}

/* Material iconsを利用する */
.material-icons {
 font-family: 'Material Icons';
 font-weight: normal;
 font-style: normal;
 font-size: 24px;  /* 推奨サイズ */
 display: inline-block;
 width: 1em;
 height: 1em;
 line-height: 1;
 text-transform: none;
 vertical-align: middle;

 /* WebKitブラウザサポート */
 -webkit-font-smoothing: antialiased;
 /* Chrome、Safariサポート */
 text-rendering: optimizeLegibility;

 /* Firefoxサポート */
 -moz-osx-font-smoothing: grayscale;

 /* IEサポート */
 font-feature-settings: 'liga';
}

/*--------------------------------------------------------------------------
 fade animation
---------------------------------------------------------------------------*/
.fade-in {
 transition: all 1.2s;
  -o-transition: all 1.2s; /* opera */
  -moz-transition: all 1.2s; /* firefox */
  -webkit-transition: all 1.2s; /* chrome, safari */
  -ms-transition: all 1.2s; /* ie */
 /*opacity: 0;*/
}
.in {
 opacity: 1.0;
}
.fade-up {
 transition: all 1.2s;
  -o-transition: all 1.2s; /* opera */
  -moz-transition: all 1.2s; /* firefox */
  -webkit-transition: all 1.2s; /* chrome, safari */
  -ms-transition: all 1.2s; /* ie */
 opacity: 0;
 transform: translate(0,60px);
 -webkit-transform: translate(0,60px);
}
.up {
 opacity: 1.0;
 transform: translate(0,0);
 -webkit-transform: translate(0,0);
}
.fade-left {
 transition: all 1.2s;
  -o-transition: all 1.2s; /* opera */
  -moz-transition: all 1.2s; /* firefox */
  -webkit-transition: all 1.2s; /* chrome, safari */
  -ms-transition: all 1.2s; /* ie */
 opacity: 0;
 transform: translate(-40px,0);
 -webkit-transform: translate(-40px,0);
}
.left {
 opacity: 1.0;
 transform: translate(0,0);
 -webkit-transform: translate(0,0);
}
.fade-right {
 transition: all 1.2s;
  -o-transition: all 1.2s; /* opera */
  -moz-transition: all 1.2s; /* firefox */
  -webkit-transition: all 1.2s; /* chrome, safari */
  -ms-transition: all 1.2s; /* ie */
 opacity: 0;
 transform: translate(40px,0);
 -webkit-transform: translate(40px,0);
}
.right {
 opacity: 1.0;
 transform: translate(0,0);
 -webkit-transform: translate(0,0);
}

.sp { display: none;}
@media screen and (max-width: 640px) {
 .pc { display: none;}
 .sp { display: block;}
 .fade-left,
 .fade-right {
  transition: all 1.2s;
   -o-transition: all 1.2s; /* opera */
   -moz-transition: all 1.2s; /* firefox */
   -webkit-transition: all 1.2s; /* chrome, safari */
   -ms-transition: all 1.2s; /* ie */
  opacity: 0;
  transform: translate(0,40px);
  -webkit-transform: translate(0,40px);
 }
 .left,
 .right {
  opacity: 1.0;
  transform: translate(0,0);
  -webkit-transform: translate(0,0);
 }
}

/*--------------------------------------------------------------------------
 html
---------------------------------------------------------------------------*/
html{ overflow-y: scroll;}

/*--------------------------------------------------------------------------
 body
---------------------------------------------------------------------------*/
body{
 letter-spacing: 0.05em;
 line-height: 1.8;
 color: #1d1d1d;
 font-family: 'Open Sans', "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
 font-size: 16px;
 -moz-osx-font-smoothing:grayscale;
 -webkit-font-smoothing:antialiased;
 font-smoothing: antialiased;
 text-rendering:auto;
 text-size-adjust:100%;
 -webkit-text-size-adjust:100%;
}

/* @SP */
@media all and (max-width: 768px){
 body{
  min-width: 320px;
  font-size: 12px;
 }
}

/*----------------------------------------------------------------------
 a
----------------------------------------------------------------------*/
a,a:link,a:visited,a:focus,a:active {
 color: #1d1d1d;
 outline:none;
 text-decoration: none;
}
a {
 -webkit-transition:  all 0.4s;
 -moz-transition:  all 0.4s;
 -o-transition:  all 0.4s;
 transition:  all 0.4s;
}

/*--------------------------------------------------------------------------
 clearfix
---------------------------------------------------------------------------*/
.cf:before, .cf:after { content: " "; display: table;}
.cf:after { clear: both;}
.cf { *zoom: 1;}

/*--------------------------------------------------------------------------
 Header
--------------------------------------------------------------------------*/
#static-header {
 position: relative;
 z-index: 10;
}
#static-header #logo {
 max-width: 361px;
 padding: 38px 0;
 float: left;
}
#static-header #logo img {
 width: 100%;
 max-width: 361px;
}
#static-header #g-nav {
 float: right;
 padding-top: 53px;
}
#static-header #g-nav > ul {
 padding-left: 50px;
 line-height: 0;
 font-size: 0;
 letter-spacing: -5px;
}
#static-header #g-nav > ul > li {
 display: inline-block;
 -webkit-transition: all 0.2s ease-in;
 -o-transition: all 0.2s ease-in;
 transition: all 0.2s ease-in;
}
#static-header #g-nav > ul > li:nth-child(6n) { margin-left: 24px;}
#static-header #g-nav > ul > li:nth-child(6n) a {
 padding: 7px 24px;
 color: #FFF;
 background: #00B900;
}
#static-header #g-nav > ul > li:nth-child(6n) a:hover { background: #1d1d1d;}
#static-header #g-nav > ul > li:nth-child(6n) > a::after { content: none; }
#static-header #g-nav > ul > li:last-child { margin-left: 24px;}
#static-header #g-nav > ul > li:last-child a {
 padding: 7px 24px 5.5px;
 color: #FFF;
 background: #30CCFF;
}
#static-header #g-nav > ul > li:last-child a:hover { background: #1d1d1d;}
#static-header #g-nav > ul > li:last-child > a::after { content: none; }
#static-header #g-nav li a {
 padding: 15px 24px;
 display: block;
 letter-spacing: 0.04em;
 line-height: 1;
 font-size: 14px;
 font-weight: bold;
 position: relative;
 -webkit-transition: all 0.2s ease-in;
 -o-transition: all 0.2s ease-in;
 transition: all 0.2s ease-in;
}
#static-header #g-nav li a .en {
 opacity: 1;
 -webkit-transition: opacity 200ms, -webkit-transform 200ms;
 -o-transition: opacity 200ms, -o-transform 200ms;
 transition: opacity 200ms, transform 200ms;
}
#static-header #g-nav li a .ja {
 left: 50%;
 margin-top: -6px;
 font-size: 13px;
 opacity: 0;
 pointer-events: none;
 position: absolute;
 top: 50%;
 -webkit-transform: translate(-50%, 125%);
         transform: translate(-50%, 125%);
 -webkit-transition: opacity 200ms, -webkit-transform 200ms;
 transition: opacity 200ms, -webkit-transform 200ms;
 transition: opacity 200ms, transform 200ms;
 transition: opacity 200ms, transform 200ms, -webkit-transform 200ms;
 white-space: nowrap;
}
#static-header #g-nav li a:hover .en {
 opacity: 0;
 -webkit-transform: translate(0%, -125%);
         transform: translate(0%, -125%);
}
#static-header #g-nav li a:hover .ja {
 opacity: 1;
 -webkit-transform: translate(-50%, 0%);
         transform: translate(-50%, 0%);
}
#static-header #g-nav li a .material-icons  {
 margin-left: 0.25em;
 line-height: 0.9;
 font-size: 15px;
}
#static-header #g-nav > ul > li.toggle:hover { background-color: #1d1d1d;}
#static-header #g-nav > ul > li.toggle > a { pointer-events: none;}
#static-header #g-nav > ul > li.toggle:hover a { color: #FFF;}
#static-header #g-nav > ul > li > a::after {
 content: "";
 width: 0;
 height: 1px;
 background-color: #1d1d1d;
 position: absolute;
 left: 50%;
 bottom: 0;
 opacity: 0;
 -webkit-transition: all 0.2s ease-in;
 -o-transition: all 0.2s ease-in;
 transition: all 0.2s ease-in;
}
#static-header #g-nav > ul > li.toggle > a::after { content: none; }
#static-header #g-nav > ul > li a:hover::after {
 width: 100%;
 left: 0;
 opacity: 1;
}
#static-header #g-nav > ul > li:hover > a {}
#static-header #g-nav > ul > li:hover .menu {
 max-height: 9999px;
 opacity: 1;
}
#static-header #g-nav > ul .menu {
 -webkit-transition: all 0.2s ease-in;
 -o-transition: all 0.2s ease-in;
 transition: all 0.2s ease-in;
 max-height: 0;
 opacity: 0;
 overflow: hidden;
 width: 100%;
 left: 0;
 text-align: center;
 position: absolute;
 background-color: #1d1d1d;
 /* -webkit-transform: translateX(-50%);
 transform: translateX(-50%); */
}
#static-header #g-nav > ul .menu .menu_inner {
 padding: 12px 0;
}
#static-header #g-nav > ul .menu .menu_inner li { display: inline-block;}
#static-header #g-nav > ul .menu a {
 padding: 10px 24px;
 letter-spacing: 0.1em;
 color: #fff;
 font-size: 13px;
}
#static-header #g-nav > ul .menu a::after {
 content: "";
 width: 0;
 height: 1px;
 background: #FFF;
 position: absolute;
 left: 50%;
 bottom: 0;
 opacity: 0;
 -webkit-transition: all 0.2s ease-in;
 -o-transition: all 0.2s ease-in;
 transition: all 0.2s ease-in;
}
#static-header #g-nav > ul .menu a:hover::after {
 width: 100%;
 left: 0;
 opacity: 1;
}

#fix-header {
 width: 100%;
 height: 80px;
 display: none;
 position: fixed;
 top: 0px;
 left: 0px;
 z-index: 2000;
}
#fix-header #logo02 {
 text-align: center;
 line-height: 0;
 background: #fff;
 position: relative;
 z-index: 1000;
}
#fix-header button { z-index: 1001;}
#fix-header #logo02 a {
 display: block;
 padding: 25px;
}
#fix-header #logo02 img {
 width: auto;
 height: 30px;
}
#fix-header #g-nav02 {
 height : 100vh;
 padding-top: 80px;
 text-align: center;
 background: #FFF;
}
#fix-header #g-nav02 li {
 margin: 0 20px;
 border-top: 1px solid #dfdfdf;
}
#fix-header #g-nav02 li:last-child { border-bottom: 1px solid #dfdfdf;}
#fix-header #g-nav02 li a {
 padding: 2em 0;
 display: block;
 line-height: 1;
 font-size: 14px;
 font-weight: bold;
}
#fix-header #g-nav02 li a span {
 padding-top: 0.75em;
 display: block;
 letter-spacing: 0.1em;
 line-height: 1;
 color: #777;
 font-size: 10px;
 font-weight: normal;
}
#fix-header #g-nav02 li a:hover,
#fix-header #g-nav02 li a:hover span { color: #88774d;}
#fix-header #g-nav02 li a .material-icons  {
 margin-left: 0.25em;
 line-height: 0.9;
 font-size: 16px;
}

#header.sub-page {
 border-bottom: 1px solid #E3E8E1;
}

@media screen and (max-width: 1280px) {
 #static-header {}
 #static-header #logo { padding: 30px 0;}
 #static-header #logo img { max-width: 292px;}
 #static-header #g-nav { padding-top: 40px;}
 #static-header #g-nav > ul { padding-left: 0;}
 #static-header #g-nav li {}
 #static-header #g-nav li a {
  padding: 10px 18px;
  font-size: 12px;
 }
 #static-header #g-nav li a .ja { font-size: 10px;}
 #static-header #g-nav li a .material-icons  { font-size: 16px;}
 #static-header #g-nav > ul .menu .menu_inner { padding: 8px 0;}
 #static-header #g-nav > ul .menu a { font-size: 11px;}
}

@media screen and (max-width: 920px) {
 #header { padding-top: 60px;}
 #static-header { display: none;}
 #fix-header {
  height: 60px;
  display: block !important;
  opacity: 1 !important;
 }
 #fix-header #logo02 a { padding: 17px 15px;}
 #fix-header #logo02 img { height: 26px;}
 #fix-header #g-nav02 { padding-top: 60px;}
 #fix-header #g-nav02 ul { padding-bottom: 30px;}
 #fix-header #g-nav02 li a { padding: 1.5em 0;}
}

@media screen and (max-width: 420px) {
 #fix-header #logo02 { text-align: left;}
 #fix-header #g-nav02 li a { font-size: 12px;}
 #fix-header #g-nav02 li a span {
  padding-top: 0.5em;
  font-size: 8px;
 }
 #fix-header #g-nav02 li a .material-icons  { font-size: 14px;}
}

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

/*--------------------------------------------------------------------------
 article / section
---------------------------------------------------------------------------*/
article { width: 100%;}
section:before, section:after { content: " "; display: table;}
section:after { clear: both;}
section { *zoom: 1;}

/*--------------------------------------------------------------------------
 inner
--------------------------------------------------------------------------*/
.inner_l {
 width: 90%;
 max-width: 1230px;
 margin: 0 auto;
 position: relative;
}

.inner_m {
 width: 90%;
 max-width: 1200px;
 margin: 0 auto;
 position: relative;
}

.inner_s {
 width: 90%;
 max-width: 1000px;
 margin: 0 auto;
 position: relative;
}

/*--------------------------------------------------------------------------
 tltle
--------------------------------------------------------------------------*/
.title {
 margin-bottom: 40px;
 text-align: center;
}
.title img {
 width: auto;
 height: 32px;
 margin: 0 auto;
 display: block;
 line-height: 1;
}
.title span {
 margin-top: 15px;
 display: block;
 line-height: 1;
 letter-spacing: 0.14em;
 font-size: 15px;
 font-weight: normal;
}

@media screen and (max-width: 1280px) {
 .title { margin-bottom: 30px;}
 .title img { height: 28px;}
 .title span { font-size: 13px;}
}

@media screen and (max-width: 640px) {
 .title { margin-bottom: 25px;}
 .title img { height: 22px;}
 .title span { font-size: 11px;}
}

@media screen and (max-width: 420px) {
 .title img { height: 20px;}
 .title span { font-size: 10px;}
}

/*--------------------------------------------------------------------------
 secion
---------------------------------------------------------------------------*/
.gray {
 padding: 80px 0;
 background: rgba(0,0,0,.04);
}
.pt80 { padding-top: 80px !important;}
.pt120 { padding: 120px 0 0;}
.pa80 { padding: 80px 0;}
section.pt100 { padding-top: 100px;}
section.bt80 {
 margin-top: 80px;
 padding-top: 80px;
 border-top: 1px solid #dfdfdf;
}
@media screen and (max-width: 1280px) {
 .gray { padding: 60px 0;}
 .pt80 { padding-top: 60px !important;}
 .pt120 { padding: 90px 0 0;}
 .pa80 { padding: 60px 0;}
 section.pt100 { padding-top: 80px;}
 section.bt80 {
  margin-top: 60px;
  padding-top: 60px;
 }
}
@media screen and (max-width: 768px) {
 .gray { padding: 40px 0;}
 .pt80 { padding-top: 40px !important;}
 .pa80 { padding: 40px 0;}
 .pt120 { padding: 60px 0 0;}
 section.pt100 { padding-top: 60px;}
}
@media screen and (max-width: 640px) {
 section.bt80 {
  margin-top: 40px;
  padding-top: 40px;
 }
}

/*--------------------------------------------------------------------------
 .btn
--------------------------------------------------------------------------*/
.simple_btn {
 text-align: center;
 letter-spacing: 0.1em;
 line-height: 1;
 font-size: 14px;
 font-weight: bold;
}
.simple_btn a {
 padding: 0 1em 10px;
 display: inline-block; *display: inline; *zoom: 1;
 color: #B19E61;
 border-bottom: 1px solid #B19E61;
}

.simple_btn a:hover {
 color: #1d1d1d;
 border-color: #1d1d1d;
}

@media screen and (max-width: 1280px) {
 .simple_btn { font-size: 12px;}
}

@media screen and (max-width: 980px) {
 .simple_btn::after { width: 100%;}
}

@media screen and (max-width: 640px) {
 .simple_btn { font-size: 11px;}
}

/*--------------------------------------------------------------------------
 横並びリスト
--------------------------------------------------------------------------*/
.three-list {
 letter-spacing: -5px;
 font-size: 0;
}
.three-list li {
 width: 30%;
 margin-left: 5%;
 display: inline-block; *display: inline; *zoom: 1;
 vertical-align: top;
 letter-spacing: normal;
 font-size: 14px;
}
.three-list li:nth-of-type(3n+1) { margin-left: 0;}
.three-list li .ttl {
 margin: 40px 0 30px;
 line-height: 1.33;
 letter-spacing: 0.2em;
 font-size: 20px;
 font-weight: normal;
}
.three-list li .ttl + p {
 letter-spacing: 0.1em;
 line-height: 2.2;
 font-size: 14px;
}

@media screen and (max-width: 1280px) {
 .three-list li {
  width: 31.333%;
  margin-left: 3%;
 }
 .three-list li .ttl {
  margin: 30px 0 20px;
  font-size: 18px;
 }
 .three-list li .ttl + p {
  line-height: 2;
  font-size: 12px;
 }
}

@media screen and (max-width: 768px) {
 .three-list li {
  width: 100%;
  margin-left: 0;
  display: block;
  margin-top: 40px;
 }
 .three-list li:first-child { margin-top: 0;}
 .three-list li .ttl {
  margin: 22px 0 15px;
  text-align: center;
  font-size: 16px;
 }
}

@media screen and (max-width: 640px) {
 .three-list li .ttl {
  font-size: 14px;
  font-weight: bold;
 }
}

/*--------------------------------------------------------------------------
 インタビューリスト
--------------------------------------------------------------------------*/
#interview-list {
 letter-spacing: -5px;
 font-size: 0;
}
#interview-list li {
 width: 25%;
 display: inline-block; *display: inline; *zoom: 1;
}
#interview-list li a {
 display: block;
 position: relative;
 background-color: #f2f2f2;
 overflow: hidden;
}
#interview-list li:nth-child(2) a,
#interview-list li:nth-child(4) a,
#interview-list li:nth-child(5) a,
#interview-list li:nth-child(7) a,
#interview-list li:nth-child(10) a,
#interview-list li:nth-child(12) a,
#interview-list li:nth-child(13) a,
#interview-list li:nth-child(15) a { background-color: #e2e2e2;}
#interview-list li a::after {
 content: "";
 width: 100%;
 height: 100%;
 display: block;
 position: absolute;
 left: 0;
 top: 0;
 background: url(../img/interview/i01.svg) left top no-repeat;
 -webkit-background-size: cover;
      -o-background-size: cover;
         background-size: cover;
}
#interview-list #int02 a::after { background-image: url(../img/interview/i02.svg);}
#interview-list #int03 a::after { background-image: url(../img/interview/i03.svg);}
#interview-list #int04 a::after { background-image: url(../img/interview/i04.svg);}
#interview-list #int05 a::after { background-image: url(../img/interview/i05.svg);}
#interview-list #int06 a::after { background-image: url(../img/interview/i06.svg);}
#interview-list #int07 a::after { background-image: url(../img/interview/i07.svg);}
#interview-list #int08 a::after { background-image: url(../img/interview/i08.svg);}
#interview-list #int09 a::after { background-image: url(../img/interview/i09.svg);}
#interview-list #int10 a::after { background-image: url(../img/interview/i10.svg);}
#interview-list #int11 a::after { background-image: url(../img/interview/i11.svg);}
#interview-list #int12 a::after { background-image: url(../img/interview/i12.svg);}
#interview-list #int13 a::after { background-image: url(../img/interview/i13.svg);}
#interview-list #int14 a::after { background-image: url(../img/interview/i14.svg);}
#interview-list #int15 a::after { background-image: url(../img/interview/i15.svg);}
#interview-list #int16 a::after { background-image: url(../img/interview/i16.svg);}
#interview-list #int17 a::after { background-image: url(../img/interview/i17.svg);}

#interview-list li a:hover { backface-visibility: hidden;}
#interview-list #int01 a:hover { background: #ff9744;}
#interview-list #int02 a:hover { background: #00a799;}
#interview-list #int03 a:hover { background: #ec917f;}
#interview-list #int04 a:hover { background: #0079b9;}
#interview-list #int05 a:hover { background: #ea57a1;}
#interview-list #int06 a:hover { background: #ffaf1a;}
#interview-list #int07 a:hover { background: #e01f1a;}
#interview-list #int08 a:hover { background: #a5d54b;}
#interview-list #int09 a:hover { background: #b4b4b4;}
#interview-list #int10 a:hover { background: #833b00;}
#interview-list #int11 a:hover { background: #1e1ea1;}
#interview-list #int12 a:hover { background: #ff7a82;}

#interview-list li a img {
 -moz-transition: -moz-transform 0.4s ease-out;
 -webkit-transition: -webkit-transform 0.4s ease-out;
 -o-transition: -o-transform 0.4s ease-out;
 -ms-transition: -ms-transform 0.4s ease-out;
 transition: transform 0.4s ease-out;
}
#interview-list li a:hover img {
 -webkit-transform: scale(1.1);
 -moz-transform: scale(1.1);
 -o-transform: scale(1.1);
 -ms-transform: scale(1.1);
 transform: scale(1.1);
}

@media screen and (max-width: 768px) {
 #interview-list li { width: 50%;}
 #interview-list li:nth-child(4) a,
 #interview-list li:nth-child(5) a,
 #interview-list li:nth-child(8) a,
 #interview-list li:nth-child(12) a,
 #interview-list li:nth-child(13) a,
 #interview-list li:nth-child(16) a { background-color: #f2f2f2 !important;}
 #interview-list li:nth-child(3) a,
 #interview-list li:nth-child(6) a,
 #interview-list li:nth-child(11) a,
 #interview-list li:nth-child(14) a { background-color: #e2e2e2 !important;}
 #interview-list li a:hover img {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
 }
}

/*--------------------------------------------------------------------------
 line
--------------------------------------------------------------------------*/

#line {
 margin-top: 140px;
 padding: 20px;
 letter-spacing: -5px;
 font-size: 0;
 background: #00B900;
 position: relative;
}
#line .mock {
 width: 16.6666%;
 line-height: 0;
 position: absolute;
 left: 5%;
 top: -35px;
}
#line .txt-wrap {
 width: 45%;
 margin-left: 25%;
 display: inline-block;
 vertical-align: middle;
 letter-spacing: 0.1em;
 color: #FFF;
}
#line .txt-wrap h3 { line-height: 1;}
#line .txt-wrap h3 .txt {
 padding-left: 1.5em; 
 display: block;
 font-size: 14px;
 font-weight: bold;
 position: relative;
}
#line .txt-wrap h3 .txt::before {
  content: "";
  width: 1em;
  height: 1px;
  border-top: 1px solid rgba(255,255,255,.8);
  position: absolute;
  top: 50%;
  left: 0;   
}
#line .txt-wrap h3 .copy {
 display: block;
 padding-top: 30px;
}
#line .txt-wrap p {
 padding-top: 1.5em;
 text-align: justify;
 letter-spacing: 0.1em;
 line-height: 1.75;
 font-weight: normal;
 font-size: 18px;
}
#line .txt-wrap .btn,
#line .txt-wrap .id { display: none;}
#line .qr {
 width: 24%;
 padding: 3%;
 margin-left: 5.75%;
 display: inline-block;
 vertical-align: middle;
 background: #FFF;
}
#line .post {
  margin-top: 50px;
  padding: 50px;
  text-align: left;  
  background: #00B900;
  border-top: 3px solid #fff;
}
#line .post p {
  line-height: 1.6;
  font-size: 28px;
  font-weight: bold;
  color:  #fff;
  letter-spacing: .04em;
}
#line .post ul {
  margin-top: 1.25em;  
  line-height: 1.8;
  color: #fff;
  font-size: 16px;
  letter-spacing: .1em;
  line-height: 2;
}
#line .post ul li {
  line-height: 2;
}


@media screen and (max-width: 1200px) {
 #line { margin-top: 100px;}
 #line .txt-wrap h3 .txt { font-size: 12px;}
 #line .txt-wrap h3 .copy { padding-top: 20px;}
 #line .txt-wrap p {
  padding-top: 22px;
  font-size: 16px;
 }
 #line .post {
  margin-top: 40px;
  padding: 40px;
 }
 #line .post p {
  font-size: 18px;
 } 
 #line .post ul {
  font-size: 14px;
 } 
}


@media screen and (max-width: 768px) {
 #line {
  width: 100vw;
  margin-top: 70px;
  padding: 40px 5%;
 }
 #line .qr { display: none;}
 #line .txt-wrap {
  width: 100%;
  margin: 0 auto;
 }
 #line .txt-wrap h3 {
  padding-bottom: 30px;
  border-bottom: 3px solid #fff;
 }
 #line .txt-wrap h3 .txt { font-size: 11px;} 
 #line .txt-wrap p .sp {
  display: inline;
 } 
 #line .txt-wrap .inner {
  margin-top: 25px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
 }
 #line .txt-wrap .mock {
  width: 25%;
  margin: 0;
  position: static;
 }
 #line .txt-wrap .mock + p {
  width: 70%;
  padding: 0;
  font-size: 13px;
 }
 #line .txt-wrap .btn {
  width: 100%;
  margin: 30px auto 0;
  padding: 0;
  display: block;
  text-align: center;
 }
 #line .txt-wrap .btn a {
  display: block;
  line-height: 60px;
  color: #00B900;
  font-size: 18px;
  font-weight: bold;
  background: #FFF;
  -webkit-border-radius: 30px;
          border-radius: 30px;
  position: relative;
 }
 #line .txt-wrap .btn a i {
  width: 30px;
  line-height: 0;
  position: absolute;
  top: 50%;
  left: 20px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
 }
 #line .txt-wrap .id {
  width: 100%;
  padding-top: 15px;
  display: block;
  text-align: center;
  font-size: 14px;
  color: #FFF;
 }
 #line .post{
  margin-top: 25px;
  padding: 30px 0 0;
 }
  #line .post p {
    font-size: 17px;
    text-align: justify;
  }
  #line .post ul {
   line-height: 1.8;
   font-size: 12px;
  }
  #line .post ul li b {
    font-size: 14px;
  }  
  #line .post ul li:not(:first-child) {
    margin-top: .75em;
  }
}


/*--------------------------------------------------------------------------
 footer
--------------------------------------------------------------------------*/
#footer {
 margin-top: 160px;
 padding: 60px 0;
 background: #1d1d1d;
 position: relative;
}
#footer .foot-left {
 width: 290px;
 float: left;
}
#footer .foot-left .logo {}
#footer .foot-left .logo a {
 display: block;
 line-height: 1;
}
#footer .foot-left address {
 margin-top: 10px;
 letter-spacing: 0.04em;
 line-height: 1;
 color: #999999;
 font-size: 10px;
 font-style: normal;
}
#footer .foot-right { float: right;}
#footer .foot-right ul {
 /* width: 480px; */
 letter-spacing: -5px;
 font-size: 0;
 width: 220px;
 display: flex;
 justify-content: space-between;
}
#footer .foot-right ul li {
/*  width: 120px;
 display: inline-block; *display: inline; *zoom: 1; */
}
#footer .foot-right ul li a {
 display: block;
 letter-spacing: 0.04em;
 line-height: 2.6;
 color: #999999;
 font-size: 12px;
 font-weight: bold;
 position: relative;
}
#footer .foot-right ul li a .material-icons  {
 margin-left: 0.25em;
 line-height: 0.9;
 font-size: 16px;
}
#footer .foot-right ul li a:hover { color: #FFF;}
#footer .foot-right ul li a::after {
 content: "";
 width: 0;
 height: 1px;
 background: #FFF;
 opacity: 0;
 position: absolute;
 bottom: 0;
 left: 0;
}
#footer .foot-right ul li a:hover::after {
 width: 90%;
 opacity: 1;
 -webkit-transition: all 0.2s ease-in;
 -o-transition: all 0.2s ease-in;
 transition: all 0.2s ease-in;
}

@media screen and (max-width: 1280px) {
 #footer {
  margin-top: 90px;
  padding: 40px 0;
 }
 #footer .foot-left { width: 292px;}
/*  #footer .foot-right ul { width: 360px;}
 #footer .foot-right ul li { width: 90px;} */
 #footer .foot-right ul li a { font-size: 10px;}
 #footer .foot-right ul li a .material-icons { font-size: 14px;}
}

@media screen and (max-width: 768px) {
 #footer { margin-top: 80px;}
 #footer .foot-left {
  width: 100%;
  text-align: center;
 }
 #footer .foot-left img {
  width: auto;
  height: 26px;
 }
 #footer .foot-right {
  width: 100%;
  margin-top: 20px;
  padding-top: 15px;
  text-align: center;
  border-top: 1px solid #444;
 }
 #footer .foot-right ul {
/*   width: 320px; */
  margin: 0 auto;
/*   text-align: left; */
 }
/*  #footer .foot-right ul li { width: 80px;} */
}

@media screen and (max-width: 640px) {
 #footer { margin-top: 0;}
}

@media screen and (max-width: 420px) {
 #footer { padding: 30px 0;}
 #footer .foot-right ul { width: 320px;}
 #footer .foot-right ul li { width: 80px;}
 #footer .foot-right ul li a { font-size: 9px;}
 #footer .foot-right ul li a .material-icons { font-size: 12px;}
}