@charset "UTF-8";
/*
Theme Name: column-colorchips_v1
Description: 株式会社カラーチップス コラムサイトのテーマ
Author:	株式会社カラーチップス (Color Chips Co.,Ltd .) 
Version: 1.0
License: GPL
License URI: https://www.gnu.org/copyleft/gpl.html
*/

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, menu, nav, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  font-weight: normal;
  vertical-align:baseline;
  background:transparent;
}

html {
  font-size: 62.5%;/*10px*/
  overflow-y: scroll;
  margin: 0;
  width: 100%;
}

body {
  -webkit-text-size-adjust: 100%;
  overflow: hidden;
}

article,aside,details,figcaption,figure,
footer,header,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;
  cursor:pointer;
}

ins {
  background-color:#ff9;
  color:#383939;
  text-decoration:none;
}

mark {
  background-color:#ff9;
  color:#383939;
  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;
}

hr {
  display:block;
  height:1px;
  border:0;
  border-top:1px solid #cccccc;
  margin:1em 0;
  padding:0;
}

input, select {
  vertical-align:middle;
}

ol li,
ul li {
	list-style: none;
	list-style-position: inside;
}

img {
	border:none;
	vertical-align: bottom;
}

* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

.mt05 { margin-top: 5px ;}
.mt10 {	margin-top: 10px ;}
.mt15 {	margin-top: 15px ;}
.mt20 {	margin-top: 20px ;}
.mt25 {	margin-top: 25px ;}
.mt30 {	margin-top: 30px ;}
.mt35 {	margin-top: 35px ;}
.mt40 {	margin-top: 40px ;}
.mt45 {	margin-top: 45px ;}
.mt50 {	margin-top: 50px ;}
.mt55 {	margin-top: 55px ;}
.mt60 {	margin-top: 60px ;}
.mt65 {	margin-top: 65px ;}
.mt70 {	margin-top: 70px ;}
.mt75 {	margin-top: 75px ;}
.mt80 {	margin-top: 80px ;}
.mt85 {	margin-top: 85px ;}
.mt90 {	margin-top: 90px ;}
.mt95 {	margin-top: 95px ;}
.mt100 { margin-top: 100px ;}
.mb05 {	margin-bottom: 5px ;}
.mb10 {	margin-bottom: 10px ;}
.mb15 {	margin-bottom: 15px ;}
.mb20 {	margin-bottom: 20px ;}
.mb25 {	margin-bottom: 25px ;}
.mb30 {	margin-bottom: 30px ;}
.mb35 {	margin-bottom: 35px ;}
.mb40 {	margin-bottom: 40px ;}
.mb45 {	margin-bottom: 45px ;}
.mb50 {	margin-bottom: 50px ;}
.mb55 {	margin-bottom: 55px ;}
.mb60 {	margin-bottom: 60px ;}
.mb65 {	margin-bottom: 65px ;}
.mb70 {	margin-bottom: 70px ;}
.mb75 {	margin-bottom: 75px ;}
.mb80 {	margin-bottom: 80px ;}
.mb85 {	margin-bottom: 85px ;}
.mb90 {	margin-bottom: 90px ;}
.mb95 {	margin-bottom: 95px ;}
.mb100 { margin-bottom: 100px ;}
.mr05 {	margin-right: 5px ;}
.mr10 {	margin-right: 10px ;}
.mr15 {	margin-right: 15px ;}
.mr20 {	margin-right: 20px ;}
.mr25 {	margin-right: 25px ;}
.mr30 {	margin-right: 30px ;}
.mr35 {	margin-right: 35px ;}
.mr40 {	margin-right: 40px ;}
.mr45 {	margin-right: 45px ;}
.mr50 {	margin-right: 50px ;}
.mr55 {	margin-right: 55px ;}
.mr60 {	margin-right: 60px ;}
.mr65 {	margin-right: 65px ;}
.mr70 {	margin-right: 70px ;}
.mr75 {	margin-right: 75px ;}
.mr80 {	margin-right: 80px ;}
.mr85 {	margin-right: 85px ;}
.mr90 {	margin-right: 90px ;}
.mr95 {	margin-right: 95px ;}
.mr100 {margin-right: 100px ;}
.ml05 {	margin-left: 5px ;}
.ml10 {	margin-left: 10px ;}
.ml15 {	margin-left: 15px ;}
.ml20 {	margin-left: 20px ;}
.ml25 {	margin-left: 25px ;}
.ml30 {	margin-left: 30px ;}
.ml35 {	margin-left: 35px ;}
.ml40 {	margin-left: 40px ;}
.ml45 {	margin-left: 45px ;}
.ml50 {	margin-left: 50px ;}
.ml55 {	margin-left: 55px ;}
.ml60 {	margin-left: 60px ;}
.ml65 {	margin-left: 65px ;}
.ml70 {	margin-left: 70px ;}
.ml75 {	margin-left: 75px ;}
.ml80 {	margin-left: 80px ;}
.ml85 {	margin-left: 85px ;}
.ml90 {	margin-left: 90px ;}
.ml95 {	margin-left: 95px ;}
.ml100 { margin-left: 100px ;}
.m_a { margin-right: auto; margin-left: auto;}
.pt00 {	padding-top: 0 ;}
.pt05 {	padding-top: 5px ;}
.pt10 {	padding-top: 10px ;}
.pt15 {	padding-top: 15px ;}
.pt20 {	padding-top: 20px ;}
.pt25 {	padding-top: 25px ;}
.pt30 {	padding-top: 30px ;}
.pt35 {	padding-top: 35px ;}
.pt40 {	padding-top: 40px ;}
.pt45 {	padding-top: 45px ;}
.pt50 {	padding-top: 50px ;}
.pt55 {	padding-top: 55px ;}
.pt60 {	padding-top: 60px ;}
.pt65 {	padding-top: 65px ;}
.pt70 {	padding-top: 70px ;}
.pt75 {	padding-top: 75px ;}
.pt80 {	padding-top: 80px ;}
.pt85 {	padding-top: 85px ;}
.pt90 {	padding-top: 90px ;}
.pt95 {	padding-top: 95px ;}
.pt100 { padding-top: 100px ;}
.pb00 {	padding-bottom: 0 ;}
.pb05 {	padding-bottom: 5px ;}
.pb10 {	padding-bottom: 10px ;}
.pb15 {	padding-bottom: 15px ;}
.pb20 {	padding-bottom: 20px ;}
.pb25 {	padding-bottom: 25px ;}
.pb30 {	padding-bottom: 30px ;}
.pb35 {	padding-bottom: 35px ;}
.pb40 {	padding-bottom: 40px ;}
.pb45 {	padding-bottom: 45px ;}
.pb50 {	padding-bottom: 50px ;}
.pb55 {	padding-bottom: 55px ;}
.pb60 {	padding-bottom: 60px ;}
.pb65 {	padding-bottom: 65px ;}
.pb70 {	padding-bottom: 70px ;}
.pb75 {	padding-bottom: 75px ;}
.pb80 {	padding-bottom: 80px ;}
.pb85 {	padding-bottom: 85px ;}
.pb90 {	padding-bottom: 90px ;}
.pb95 {	padding-bottom: 95px ;}
.pb100 { padding-bottom: 100px ;}
.pr05 {	padding-right: 5px ;}
.pr10 {	padding-right: 10px ;}
.pr15 {	padding-right: 15px ;}
.pr20 {	padding-right: 20px ;}
.pr25 {	padding-right: 25px ;}
.pr30 {	padding-right: 30px ;}
.pr35 {	padding-right: 35px ;}
.pr40 {	padding-right: 40px ;}
.pr45 {	padding-right: 45px ;}
.pr50 {	padding-right: 50px ;}
.pr55 {	padding-right: 55px ;}
.pr60 {	padding-right: 60px ;}
.pr65 {	padding-right: 65px ;}
.pr70 {	padding-right: 70px ;}
.pr75 {	padding-right: 75px ;}
.pr80 {	padding-right: 80px ;}
.pr85 {	padding-right: 85px ;}
.pr90 {	padding-right: 90px ;}
.pr95 {	padding-right: 95px ;}
.pr100 { padding-right: 100px ;}
.pl05 {	padding-left: 5px ;}
.pl10 {	padding-left: 10px ;}
.pl15 {	padding-left: 15px ;}
.pl20 {	padding-left: 20px ;}
.pl25 {	padding-left: 25px ;}
.pl30 {	padding-left: 30px ;}
.pl35 {	padding-left: 35px ;}
.pl40 {	padding-left: 40px ;}
.pl45 {	padding-left: 45px ;}
.pl50 {	padding-left: 50px ;}
.pl55 {	padding-left: 55px ;}
.pl60 {	padding-left: 60px ;}
.pl65 {	padding-left: 65px ;}
.pl70 {	padding-left: 70px ;}
.pl75 {	padding-left: 75px ;}
.pl80 {	padding-left: 80px ;}
.pl85 {	padding-left: 85px ;}
.pl90 {	padding-left: 90px ;}
.pl95 {	padding-left: 95px ;}
.pl100 { padding-left: 100px ;}
.fl_r { float: right; }
.fl_l { float: left; }
.fw_b { font-weight: bold; }
.txt_c { text-align: center; }
.txt_r { text-align: right; }
.txt_l { text-align: left; }
.w95per { width: 95%;}
.w90per { width: 90%;}
.w85per { width: 85%;}
.w80per { width: 80%;}
.w75per { width: 75%;}
.w70per { width: 70%;}
.w65per { width: 65%;}
.w60per { width: 60%;}
.w55per { width: 55%;}
.w50per { width: 50%;}

body {
	font-family: 'Noto Sans JP', Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" ,  "メイリオ" , Meiryo , "Meiryo UI" , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
	font-size: 10px;
  line-height: 1.8;
  color: #303030;
  background: #fff;
  /* word-break: break-all; */
  word-wrap: break-word;
  overflow-wrap: break-word;
}

@media screen and (max-width: 1800px) {
  body {
    font-size: calc(10vw / 18);
  }
}

@media screen and (max-width: 768px) {
  body {
    font-size: calc(10vw / 3.75);
  }
}

.serif {
  font-family:'Noto Serif JP',"Roboto Slab" , Garamond , "Times New Roman" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
}

.round {
  font-family: "M PLUS Rounded 1c", sans-serif;
}

a {
  color: #303030;
	text-decoration:none;
}

a:hover {
  color: #303030;
  text-decoration: underline;
  opacity: 0.7;
  -webkit-transition: all .3s;
  transition: all .3s;
	text-decoration:none;
}
/* 
a:hover img {
	opacity: 0.7;
	-webkit-transition: all .3s;
	transition: all .3s;
} */

.cf:after{
	content:".";
	display:block;
	clear:both;
	height:0;
	visibility:hidden;
}

.inner {
  max-width: 170em;
  margin-right: auto;
  margin-left: auto !important;
}

.inner_1200 {
  max-width: 120em;
  margin-right: auto;
  margin-left: auto !important;
}

.flex {
  display: flex !important;
  justify-content: space-between;
  align-items: stretch;
}

.bg-lazy  {
  background-image: none!important;
}

.bg-lazy::before,
.bg-lazy::after {
  background-image: none!important;
}

img {
  max-width: 100%;
  width: 100%;
  height: auto;
}

.img {
  text-align: center;
}

.horizontal-line {
  overflow: hidden;
  text-align: center;
}

.horizontal-line span {
  display: inline-block;
  padding: 0 0.5em;
  position: relative;
  font-weight: bold;
}

.horizontal-line span:before,
.horizontal-line span:after {
  border-top: 1px solid;
  content: "";
  position: absolute;
  top: 50%;
  width: 99em;
}

.horizontal-line span:before {
    right: 100%;
}

.horizontal-line span:after {
    left: 100%;
}

@media only screen and (min-width: 769px){

  .tb,
  .sp {
    display: none !important;
  }

}

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

  .inner,
  .inner_1200 {
    max-width: 100%;
    margin-right: auto;
    margin-left: auto !important;
    padding: 0 1.6em;
  }

  .pc,
  .sp {
    display: none !important;
  }

  .flex {
    flex-wrap: wrap;
  }

  .img img {
    max-width: initial;
    width: 100%;
  }
  
}

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

  .pc-tb {
    display: none !important;
  }

  .sp {
    display: block !important;
  }

}

/* section
----------------------------------------------- */

section,
.section {
  padding: 6em 0;
}

.section.pt00 {
  padding-top: 0;
}

.section.pb00 {
  padding-bottom: 0;
}

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

  section,
  .section {
    padding: 3em 0;
  }
}


/* ==============================================
 loading 
=============================================== */

#loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

.loaded {
  opacity: 0;
  visibility: hidden;
}

#loading p{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

#loading p span {
  color: #e70011;
  font-size: 24px;
  font-weight: bold;
  display: inline-block;
  margin: 0 -.05em;
  animation: loading 1.4s infinite alternate;
}
#loading p span:nth-child(2) {
  color: #f39906;
  animation-delay: .1s;
}
#loading p span:nth-child(3) {
  color: #f9ef08;
  animation-delay: .2s;
}
#loading p span:nth-child(4) {
  color: #27ae39;
  animation-delay: .3s;
}
#loading p span:nth-child(5) {
  color: #03a2ea;
  animation-delay: .4s;
}
#loading p span:nth-child(6) {
  color: #192889;
  animation-delay: .5s;
}
#loading p span:nth-child(7) {
  color: #920d83;
  animation-delay: .6s;
}
@keyframes loading {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


/* ==============================================
 fadeAnime 
=============================================== */

/* その場で */
.fadeIn{
  animation-name:fadeInAnime;
  animation-duration:1.5s;
  animation-fill-mode:forwards;
  opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 下から */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 上から */

.fadeDown{
animation-name:fadeDownAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeDownAnime{
  from {
    opacity: 0;
  transform: translateY(-100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 左から */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
  transform: translateX(-100px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

/* 右から */

.fadeRight{
animation-name:fadeRightAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
  transform: translateX(100px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
  
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}

/* ==============================================
 header
=============================================== */

header {
  height: 11em;
}

#header_fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  -webkit-transition: all .2s;
  transition: all .2s;
  z-index: 103;
}

#header_fixed.fixed {
  background: rgb(255 255 255 / 0.7);
}

#header_fixed .flex01 {
  padding: 0 0 0 2em;
  flex-wrap: nowrap;
  align-items: center;
}

#header_fixed .flex01 .logo {
  width: 36em;
}

#header_fixed .flex01 .logo a {
  display: block;
}

#header_fixed .flex01 .logo img {
  width: 100%;
  height: auto;
}

#header_fixed .flex01 .right .flex02 {
  justify-content: flex-end;
  align-items: center;
}

#header_fixed .flex01 .right nav {
  width: 46em;
}

#header_fixed .flex01 .right nav ul {
  width: 100%;
  justify-content: center;
}

#header_fixed .flex01 .right nav ul li {
  font-size: 2em;
  margin-right: 1em;
  padding-right: 2em;
  position: relative;
}

#header_fixed .flex01 .right nav ul li::after {
  content: "／";
  position: absolute;
  top: 50%;
  right: 0%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

#header_fixed .flex01 .right nav ul li:last-child {
  margin-right: 0;
  padding-right: 0;
}

#header_fixed .flex01 .right nav ul li:last-child::after {
  content: none;
}

#header_fixed .flex01 .right nav ul li a {
  display: block;
  font-weight: bold;
}

#header_fixed .flex01 .right nav ul li a:hover {
  color: #f35f21;
}

#header_fixed .flex01 .right .contact {
  width: 30em;
}

#header_fixed .flex01 .right .contact a {
  width: 100%;
  height: 11em;
  color: #fff;
  background: #f35f21;
  border: 2px solid #f35f21;
  display: flex;
  justify-content: center;
  align-items: center;
}

#header_fixed .flex01 .right .contact a:hover {
  background: #fff;
  color: #f35f21;
  opacity: 1;
}

#header_fixed .flex01 .right .contact a span {
  display: inline-block;
  font-size: 2em;
  font-weight: bold;
  letter-spacing: 0.01em;
  position: relative;
  padding-left: 2.5em;
}

#header_fixed .flex01 .right .contact a span::before {
  content: "";
  width: 2em;
  height: 1.2em;
  background-image:url(./images/header_icon_mail.png);
  background-position:center;
  background-repeat:no-repeat;
  -moz-background-size:contain;
  background-size:contain;
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

#header_fixed .flex01 .right .contact a:hover span::before {
  background-image:url(./images/header_icon_mail_on.png);
}

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

  header {
    height: 4em;
  }

  #header_fixed .flex01 {
    padding: 0 0 0 1em;
  }

  #header_fixed .flex01 .logo {
    width: 25%;
  }

  #header_fixed .flex01 .right {
    width: 73%;
  }

  #header_fixed .flex01 .right .flex02 {
    flex-wrap: nowrap;
  }

  #header_fixed .flex01 .right .flex02 nav {
    width: 65%;
  }

  #header_fixed .flex01 .right nav ul {
    flex-wrap: nowrap;
  }

  #header_fixed .flex01 .right nav ul li {
    font-size: 0.9em;
    margin-right: 0.5em;
    padding-right: 1em;
  }

  #header_fixed .flex01 .right nav ul li::after {
    content: "/";
  }

  #header_fixed .flex01 .right .contact {
    width: 35%;
  }

  #header_fixed .flex01 .right .contact a {
    height: 4em;
    letter-spacing: 0;
  }

  #header_fixed .flex01 .right .contact a span {
    font-size: 0.9em;
  }

}

@media (max-width: 480px) {

  #header_fixed .flex01 .logo {
    width: 35%;
  }

  #header_fixed .flex01 .right {
    width: 65%;
  }

  #header_fixed .flex01 .right .flex02 nav {
    width: 80%;
    padding-left: 1em;
  }

  #header_fixed .flex01 .right nav ul li {
    font-size: 1em;
  }

  #header_fixed .flex01 .right .contact {
    width: 20%;
  }

  #header_fixed .flex01 .right .contact a:hover {
    background: #f35f21;
  }

  #header_fixed .flex01 .right .contact a span {
    padding: 0;
    width: 2em;
  }

  #header_fixed .flex01 .right .contact a span::before {
    content: none;
  }

  #header_fixed .flex01 .right .contact a span img {
    vertical-align: middle;
  }

}

/* ==============================================
 #mv
=============================================== */

#mv {
  height: 100em;
  background-image:url(./images/mv_img.jpg);
  background-position:center;
  background-repeat:no-repeat;
  -moz-background-size:cover;
  background-size:cover;
}

#mv .inner {
  position: relative;
  height: 100%;
}

#mv .inner h2 {
  position: absolute;
  top: 20em;
  left: 0;  
}

#mv .inner h2 span {
  display: inline-block;
  line-height: 1.2;
}

#mv .inner h2 .h2_01 {
  background: #e60012;
  color: #fff;
  padding: 2em 4em;
  margin-bottom: 3em;
}

#mv .inner h2 .h2_01 .h2_01_01 {
  font-size: 4.8em;
  font-weight: 700;
}

#mv .inner h2 .h2_01 .h2_01_02 {
  font-size: 4.8em;
  font-weight: 500;
}

#mv .inner h2 .h2_02 {
  background: #fff;
  color: #e60012;
  padding: 1em 3em 2.5em;
}

#mv .inner h2 .h2_02 .h2_02_01 {
  font-size: 9.2em;
  font-weight: 700;
  margin-right: 0.2em;
}

#mv .inner h2 .h2_02 .h2_02_02 {
  font-size: 6em;
  font-weight: 700;
}

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

  #mv {
    height: 50em;
    background-image:url(./images/mv_img_sp.jpg);
  }

  #mv .inner h2 {
    top: 15em;
    left: 1.6em;
  }

  #mv .inner h2 span {
    line-height: 1;
  }

  #mv .inner h2 .h2_01 {
    padding: 1em 2em;
    margin-bottom: 1.5em;
  }

  #mv .inner h2 .h2_01 .h2_01_01 {
    font-size: 2.4em;
    margin-bottom: 0.3em;
  }

  #mv .inner h2 .h2_01 .h2_01_02 {
    font-size: 1.6em;
  }

  #mv .inner h2 .h2_02 {
    padding: 1em 2em;
  }

  #mv .inner h2 .h2_02 .h2_02_01 {
    font-size: 3em;
  }

  #mv .inner h2 .h2_02 .h2_02_02 {
    font-size: 1.8em;
    margin: 0.3em 0 0 0.5em;
  }

}

/* ==============================================
 #toppage #topics 
=============================================== */

#toppage #topics {
  background: #f54956;
  position: relative;
  padding: 12em 0;
}

#toppage #topics::after {
  content: "";
  width: 75%;
  height: 100%;
  background: #fff;
  position: absolute;
  top: -6em;
  right: 0;
}

#toppage #topics h2 {
  text-align: center;
  position: absolute;
  width: 100%;
  top: 0;
  z-index: 1;
}

#toppage #topics h2 span {
  display: inline-block;
  background: #e60012;
  color: #fff;
  font-size: 4.8em;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1;
  padding: 0.3em 4em;
}

#toppage #topics .inner {
  max-width: 140em;
  position: relative;
  z-index: 1;
}

#toppage #topics .permalink:hover {
  opacity: 1;
}

#toppage #topics .flex01 {
  align-items: center;
}

#toppage #topics .flex01 .left {
  width: 53%;
}

#toppage #topics .flex01 .right {
  width: 43%;
}

#toppage #topics .flex01 .left .img {
  position: relative;
  overflow: hidden;
}

#toppage #topics .flex01 .left .permalink .img img {
  -webkit-transition: all .3s;
  transition: all .3s;  
}

#toppage #topics .flex01 .left .permalink:hover .img img {
  transform: scale(1.1);
}

#toppage #topics .flex01 .left .img .video {
  position: absolute;
  width: 26%;
  bottom: 1em;
  left: 1em;
}

#toppage #topics .flex01 .right .division {
  margin-bottom: 2em;
}

#toppage #topics .flex01 .right .division span {
  display: inline-block;
  color: #fff;
  font-size: 1.8em;
  font-weight: bold;
  padding: 0.5em 2em;
}

#toppage #topics .flex01 .right .division span.research-and-development {
  background: #e60012;
}

#toppage #topics .flex01 .right .division span.it-service {
  background: #7ecef4;
}

#toppage #topics .flex01 .right .cate span {
  display: inline-block;
  background: #227fb2;
  color: #fff;
  font-size: 1.6em;
  font-weight: bold;
  line-height: 1;
  padding: 0.5em 1em;
  border-radius: 0.5em;
  margin: 0 1em 0.7em 0;
}

#toppage #topics .flex01 .right .cate span:last-child {
  margin-right: 0;
}

#toppage #topics .flex01 .right .title {
  font-size: 2em;
  font-weight: bold;
  margin-bottom: 0.5em;
}

#toppage #topics .flex01 .right .title .permalink:hover {
  text-decoration: underline;
}

#toppage #topics .flex01 .right .date {
  font-size: 2em;
  font-weight: bold;
  color: #787878;
}


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

  #toppage #topics {
    padding: 9em 0 3em;
  }

  #toppage #topics::after {
    width: 88%;
    top: 0;
  }

  #toppage #topics h2 {
    top: 3em;
  }

  #toppage #topics h2 span {
    font-size: 2.4em;
    padding: 0.3em 2em;
  }

  #toppage #topics .inner {
    max-width: 100%;
  }

  #toppage #topics .flex01 .left {
    width: 100%;
    order: 1;
    margin-top: 1em;
  }

  #toppage #topics .flex01 .right {
    width: 100%;
  }

  #toppage #topics .flex01 .left .permalink .img img {
    -webkit-transition: none;
    transition: none;  
  }

  #toppage #topics .flex01 .left .permalink:hover .img img {
    transform: none;
  }

  #toppage #topics .flex01 .left .img .video {
    width: 30%;
  }

  #toppage #topics .flex01 .right .division {
    margin-bottom: 1em;
  }

  #toppage #topics .flex01 .right .division span {
    font-size: 1.3em;
  }

  #toppage #topics .flex01 .right .cate span {
    font-size: 1.2em;
  }

  #toppage #topics .flex01 .right .title {
    font-size: 1.4em;
  }

  #toppage #topics .flex01 .right .date {
    font-size: 1.4em;
  }

}

/* ==============================================
 #toppage #new
=============================================== */

#toppage #new h2 {
  text-align: center;
  font-size: 4.2em;
  font-weight: bold;
  color: #e60012;
  margin-bottom: 0.5em;
}

#toppage #new .h2_sub {
  font-size: 2em;
}

#toppage #new .sec_new_h3 {
  text-align: center;
  position: relative;
  margin: 4em 0;
}

#toppage #new .sec_new_h3:before {
  content: "";
  width: 70%;
  height: 100%;
  background: #e60012;
  position: absolute;
  top: 0;
  left: 0;
}

#toppage #new .sec_new_h3 span {
  display: inline-block;
  font-size: 4.8em;
  font-weight: bold;
  color: #fff;
  padding: 0.3em 0;
  line-height: 1;
  letter-spacing: 0.1em;
  position: relative;
  z-index: 1;
}


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

  #toppage #new h2 {
    font-size: 1.8em;
  }

  #toppage #new .h2_sub {
    font-size: 1.4em;
  }

  #toppage #new .sec_new_h3 {
    margin: 2.5em 0;
  }

  #toppage #new .sec_new_h3:before {
    width: 85%;
  }

  #toppage #new .sec_new_h3 span {
    font-size: 2.4em;
  }


}

/* ==============================================
 #toppage #movie
=============================================== */

#toppage #movie {
  background: #f54956;
}

#toppage #movie,
#toppage #movie a,
#toppage #movie a:hover {
  color: #fff;
}

#toppage #movie a:hover {
  opacity: 1;
}

#toppage #movie h2 {
  text-align: center;
  font-size: 4.8em;
  font-weight: bold;
  letter-spacing: 0.1em;
  margin-bottom: 1em;
}

.movie_list {
  flex-wrap: wrap;
}

.movie_list li {
  width: 48%;
  margin-bottom: 5em;
}

.movie_list li .img {
  overflow: hidden;
}

.movie_list li .img a img {
  -webkit-transition: all .3s;
  transition: all .3s;  
}

.movie_list li .img a:hover img {
  transform: scale(1.1);
}

.movie_list li .title {
  font-size: 2em;
  font-weight: bold;
  margin: 1em 0;
}

.movie_list li .url a {
  font-size: 2em;
  font-weight: bold;
}

.movie_list li .url a:hover {
  text-decoration: underline;
}

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

  #toppage #movie h2 {
    font-size: 2.4em;
  }

  .movie_list li {
    width: 100%;
    margin-bottom: 3em;
  }

  .movie_list li .img a img {
    -webkit-transition: none;
    transition: none;  
  }

  .movie_list li .img a:hover img {
    transform: scale(1);
  }

  .movie_list li .title {
    font-size: 1.6em;
  }

  .movie_list li .url a {
    font-size: 1.6em;
  }

}

/* ==============================================
 #toppage #archive 
=============================================== */


#toppage #archive .sec_archive_h3 {
  text-align: center;
  position: relative;
  margin: 4em 0;
}

#toppage #archive .sec_archive_h3:before {
  content: "";
  width: 70%;
  height: 100%;
  background: #e60012;
  position: absolute;
  top: 0;
  left: 0;
}

#toppage #archive .sec_archive_h3 span {
  display: inline-block;
  font-size: 4.8em;
  font-weight: bold;
  color: #fff;
  padding: 0.3em 0;
  line-height: 1;
  letter-spacing: 0.1em;
  position: relative;
  z-index: 1;
}

#toppage #archive .btn {
  text-align: center;
}

#toppage #archive .btn a {
  display: inline-block;
  background: #009e96;
  width: 15em;
  color: #fff;
  font-size: 2em;
  font-weight: bold;
  letter-spacing: 0.2em;
  line-height: 1;
  padding: 1.7em 1em;
  border-radius: 0.5em;
  box-shadow: 0.2em 0.2em 0 0 #014a47;
}

#toppage #archive .btn a:hover {
  opacity: 1;
  color: #fff;
}

#toppage #archive .btn a:hover {
  transform: translateY(0.5em);
  -webkit-transition: all .3s;
  transition: all .3s;  
}

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

  #toppage #archive .sec_archive_h3 {
    margin: 2.5em 0;
  }

  #toppage #archive .sec_archive_h3:before {
    width: 85%;
  }

  #toppage #archive .sec_archive_h3 span {
    font-size: 2.4em;
  }

  #toppage #archive .btn a {
    width: 13em;
    font-size: 1.6em;
    padding: 1.5em 1em;
  }

  #toppage #archive .btn a:hover {
    transform: none;
    -webkit-transition: none;
    transition: none;  
  }

}

/* ==============================================
 #btm_common #business
=============================================== */

#btm_common {
  padding-top: 16em
}

#btm_common #business {
  background: #fbfbfb;
  margin-top: -12em;
  padding-top: 12em;
  padding-bottom: 12em;
}

#btm_common #business h2 {
  text-align: center;
}

#btm_common #business h2 span {
  display: inline-block;
  background: #e60012;
  color: #fff;
  font-size: 4.8em;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1;
  padding: 0.3em 4em;
}

#btm_common #business .div {
  margin-top: 8em;
}

#btm_common #business .div .inner {
  padding: 0 10em;
}

#btm_common #business .div .flex01 .txt_block {
  width: 43%;
}

#btm_common #business .div .flex01 .img_block {
  width: 53%;
}

#btm_common #business .div .flex01 .txt_block {
  position: relative;
  padding-top: 4em;
}

#btm_common #business .div .flex01 .txt_block h3 {
  margin-bottom: 2.5em;
}

#btm_common #business .div .flex01 .txt_block h3 span {
  background: #e60012;
  font-size: 3em;
  font-weight: bold;
  color: #fff;
  line-height: 1;
  padding: 0.3em 1em; 
}

#btm_common #business .div .flex01 .txt_block .h3_sub {
  font-size: 2em;
  font-weight: bold;
  margin-bottom: 2em;
}

#btm_common #business .div .flex01 .txt_block .txt {
  font-size: 1.8em;
  font-weight: 500;
}

#btm_common #business .div .flex01 .txt_block .btn {
  position: absolute;
  bottom: 4em;
  left: 0;
}

#btm_common #business .div .flex01 .txt_block .btn a {
  display: block;
  text-align: center;
  background: #009e96;
  width: 13em;
  color: #fff;
  font-size: 2em;
  font-weight: bold;
  letter-spacing: 0.2em;
  line-height: 1;
  padding: 1.5em 1em;
  border-radius: 0.5em;
  box-shadow: 0.2em 0.2em 0 0 #014a47;
}

#btm_common #business .div .flex01 .txt_block .btn a:hover {
  opacity: 1;
  color: #fff;
}

#btm_common #business .div .flex01 .txt_block .btn a:hover {
  transform: translateY(0.5em);
  -webkit-transition: all .3s;
  transition: all .3s;  
}

/* #btm_common #business .div01
----------------------------------------------- */

#btm_common #business .div01 .flex01 .txt_block h3 span {
  background: #e60012;
}

#btm_common #business .div01 {
  position: relative;
}

#btm_common #business .div01::before {
  content: "";
  width: 40%;
  height: 40em;
  background: #e60012;
  position: absolute;
  bottom: -5em;
  left: 0;
}

#btm_common #business .div01 .flex01 {
  position: relative;
  z-index: 1;
}


/* #btm_common #business .div02
----------------------------------------------- */

#btm_common #business .div02 .flex01 .txt_block h3 span {
  background: #10ac3a;
}

#btm_common #business .div02 {
  position: relative;
}

#btm_common #business .div02::before {
  content: "";
  width: 55%;
  height: 40em;
  background: #10ac3a;
  position: absolute;
  bottom: 5em;
  right: 0;
}

#btm_common #business .div02 .flex01 {
  position: relative;
  z-index: 1;
}


/* #btm_common #business .div03
----------------------------------------------- */

#btm_common #business .div03 .flex01 .txt_block h3 span {
  background: #7ecef4;
}

#btm_common #business .div03 {
  position: relative;
}

#btm_common #business .div03::before {
  content: "";
  width: 40%;
  height: 40em;
  background: #7ecef4;
  position: absolute;
  bottom: -5em;
  left: 0;
}

#btm_common #business .div03 .flex01 {
  position: relative;
  z-index: 1;
}

/* #btm_common #business .div04
----------------------------------------------- */

#btm_common #business .div04 .flex01 .txt_block h3 span {
  background: #f19149;
}

#btm_common #business .div04 .flex01 {
  position: relative;
}

#btm_common #business .div04 .flex01::after {
  content: "";
  width: 45em;
  height: 45em;
  background: #f19149;
  border-radius: 50%;
  position: absolute;
  bottom: -10em;
  right: 44em;
}

#btm_common #business .div04 .flex01 .item {
  position: relative;
  z-index: 1;
}

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

  #btm_common {
    padding-top: 8em
  }

  #btm_common #business {
    margin-top: -6em;
    padding-top: 6em;
    padding-bottom: 6em;
  }

  #btm_common #business h2 span {
    font-size: 2.4em;
    padding: 0.3em 2em;
  }

  #btm_common #business .div {
    margin-top: 6em;
  }

  #btm_common #business .div01 {
    margin-top: 4em;
  }

  #btm_common #business .div .inner {
    padding: 0 1.6em;
  }

  #btm_common #business .div .flex01 .txt_block {
    width: 100%;
    margin-bottom: 3em;
  }

  #btm_common #business .div .flex01 .img_block {
    width: 100%;
    order: 1;
  }

  #btm_common #business .div .flex01 .txt_block {
    padding-top: 0;
  }

  #btm_common #business .div .flex01 .txt_block h3 {
    margin-bottom: 1.5em;
  }

  #btm_common #business .div .flex01 .txt_block h3 span {
    font-size: 1.6em;
  }

  #btm_common #business .div .flex01 .txt_block .h3_sub {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 1.5em;
  }

  #btm_common #business .div .flex01 .txt_block .txt {
    font-size: 1.4em;
  }

  #btm_common #business .div .flex01 .txt_block .btn {
    position: static;
    margin-top: 2em;
  }

  #btm_common #business .div .flex01 .txt_block .btn a {
    font-size: 1.4em;
    padding: 1.2em 1em;
  }

  #btm_common #business .div .flex01 .txt_block .btn a:hover {
    transform: none;
    -webkit-transition: none;
    transition: none;  
  }

  /* #btm_common #business .div01
  ----------------------------------------------- */

  #btm_common #business .div01 .flex01::after {
    width: 25em;
    height: 25em;
    bottom: -2em;
    right: -2em;
  }

  /* #btm_common #business .div01
  ----------------------------------------------- */

  #btm_common #business .div01::before {
    width: 60%;
    height: 20em;
    bottom: -2.5em;
  }

  /* #btm_common #business .div02
  ----------------------------------------------- */

  #btm_common #business .div02::before {
    width: 100%;
    height: 18em;
    bottom: 2em;
    right: 0;
  }

  /* #btm_common #business .div03
  ----------------------------------------------- */

  #btm_common #business .div03::before {
    width: 60%;
    height: 20em;
    bottom: -2.5em;
  }

  /* #btm_common #business .div04
  ----------------------------------------------- */

  #btm_common #business .div04 .flex01::after {
    width: 25em;
    height: 25em;
    bottom: -3em;
    right: -6em;
  }

}

/* ==============================================
 #btm_common #service 
=============================================== */

#btm_common #service {
  background: #323232;
  color: #fff;
}

#btm_common #service a,
#btm_common #service a:hover {
  color: #fff;
  opacity: 1;
}

#btm_common #service h2 {
  text-align: center;
  font-size: 4.8em;
  font-weight: bold;
  margin-bottom: 1em;
}

#btm_common #service ul {
  flex-wrap: wrap;
  justify-content: flex-start;
}

#btm_common #service ul li {
  width: 32%;
  margin-right: 1.8%;
  margin-bottom: 3em;
}

#btm_common #service ul li:nth-child(3n) {
  margin-right: 0;
}

#btm_common #service ul li a {
  display: block;
  overflow: hidden;
  position: relative;
}

#btm_common #service ul li a img {
  -webkit-transition: all .3s;
  transition: all .3s;  
}

#btm_common #service ul li a:hover img {
  transform: scale(1.1);
}

#btm_common #service ul li a .div_name {
  width: 70%;
  padding: 1.5em;
  position: absolute;
  top: 50%;
  left: 2em;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

#btm_common #service ul li a .div_name span {
  display: inline-block;
  line-height: 1;
  font-weight: bold;
}

#btm_common #service ul li a .div_name .fs_b {
  font-size: 3em;
  margin-bottom: 0.5em;
}

#btm_common #service ul li a .div_name .fs_s {
  font-size: 1.8em;
}

#btm_common #service ul li:nth-child(6) a .div_name .fs_b:last-child {
  margin-bottom: 0;
}

#btm_common #service ul li:first-child a .div_name {
  background: rgb(from #06097c r g b / 0.9);
}

#btm_common #service ul li:nth-child(2) a .div_name {
  background: rgb(from #0068b7 r g b / 0.9);
}

#btm_common #service ul li:nth-child(3) a .div_name {
  background: rgb(from #b1a80d r g b / 0.9);
}

#btm_common #service ul li:nth-child(4) a .div_name {
  background: rgb(from #f39800 r g b / 0.9);
}

#btm_common #service ul li:nth-child(5) a .div_name {
  background: rgb(from #77020b r g b / 0.9);
}

#btm_common #service ul li:nth-child(6) a .div_name {
  background: rgb(from #ec6941 r g b / 0.9);
}

#btm_common #service ul li:nth-child(7) a .div_name {
  background: rgb(from #f19ec2 r g b / 0.9);
}

#btm_common #service ul li:nth-child(8) a .div_name {
  background: rgb(from #ffd800 r g b / 0.9);
}

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

  #btm_common #service h2 {
    font-size: 2.4em;
  }

  #btm_common #service ul li {
    width: 90%;
    margin: 0 auto 1.5em;
  }

  #btm_common #service ul li:nth-child(3n) {
    margin-right: auto;
  }

  #btm_common #service ul li a:hover img {
    transform: none;
  }

  #btm_common #service ul li a .div_name {
    width: 80%;
    left: 1.5em;
  }

  #btm_common #service ul li a .div_name .fs_b {
    font-size: 1.6em;
  }

  #btm_common #service ul li a .div_name .fs_s {
    font-size: 1.2em;
  }

}

/* ==============================================
  #btm_common #contact
=============================================== */

#btm_common #contact {
  position: relative;
  overflow: hidden;
  padding: 0;
  height: 50em;
}

#btm_common #contact::after {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  background-image:url(./images/btm_common_contact_img.jpg);
  background-position:center;
  background-repeat:no-repeat;
  -moz-background-size:cover;
  background-size:cover;
  -webkit-transition: all .3s;
  transition: all .3s; 
}

#btm_common #contact.scale::after {
  transform: scale(1.1);
}

#btm_common #contact,
#btm_common #contact a,
#btm_common #contact a:hover {
  color: #fff;
}

#btm_common #contact .btn {
  display: block;
  width: 48em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  z-index: 1;
}

#btm_common #contact .btn h2 {
  text-align: center;
  position: relative;
  padding-bottom: 3em;
  margin-bottom: 3em;
}

#btm_common #contact .btn h2::after {
  content: "";
  width: 80%;
  height: 0.7em;
  background: #fff;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

#btm_common #contact .btn h2 span {
  display: inline-block;
  font-weight: bold;
  line-height: 1;
}

#btm_common #contact .btn h2 .ja {
  font-size: 3em;
  margin-bottom: 1em;
}

#btm_common #contact .btn h2 .en {
  font-size: 6em;
}

#btm_common #contact .btn .h2_sub {
  font-size: 2em;
  font-weight: 500;
  text-align: center;
}

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

  #btm_common #contact {
    height: 30em;
  }

  #btm_common #contact::after {
    background-image:url(./images/btm_common_contact_img_sp.jpg);
    -webkit-transition: none;
    transition: none; 
  }

  #btm_common #contact.scale::after {
    transform: none;
  }

  #btm_common #contact .btn {
    width: 90%;
  }

  #btm_common #contact .btn:hover {
    opacity: 1;
  }

  #btm_common #contact .btn h2 {
    padding-bottom: 2em;
    margin-bottom: 2em;
  }

  #btm_common #contact .btn h2::after {
    width: 70%;
    height: 0.4em;
  }

  #btm_common #contact .btn h2 .ja {
    font-size: 2em;
    margin-bottom: 0.7em;
  }

  #btm_common #contact .btn h2 .en {
    font-size: 4em;
  }

  #btm_common #contact .btn .h2_sub {
    font-size: 1.4em;
  }

}


/* ==============================================
  #footer 
=============================================== */

#footer {
  background: #000;
}

#footer,
#footer a,
#footer a:hover {
  color: #fff;
}

#footer .upper {
  padding-top: 6em;
  padding-bottom: 12em;
}

#footer .upper .logo {
  width: 25%;
}

#footer .upper .logo a {
  display: block;
  width: 36em;
}

#footer .upper nav {
  width: 70%;
}

#footer .upper nav a:hover {
  opacity: 1;
}

#footer .upper nav .parent > li {
  width: 25%;
}

#footer .upper nav .parent > li:first-child {
  width: 23%;
}

#footer .upper nav .parent > li:nth-child(3) {
  width: 27%;
}

#footer .upper nav .parent > li .div_name {
  margin-bottom: 1.5em;
}

#footer .upper nav .parent > li .div_name a {
  font-size: 2em;
  font-weight: bold;
  line-height: 1;
  position: relative;
}

#footer .upper nav .child > li {
  margin-bottom: 1.5em;
}

#footer .upper nav .child > li a {
  font-size: 1.6em;
  font-weight: 500;
  line-height: 1;
  position: relative;
  padding-left: 1.2em;
}

#footer .upper nav .child > li a::before {
  content: "・";
  font-weight: bold;
  position: absolute;
  top: 0.2em;
  left: 0;
}

#footer .upper nav ul li a::after {
  content: "";
  margin-top: -0.2em;
  width: 0.4em;
  height: 0.4em;
  border-top: 2px solid transparent;
  border-right: 2px solid transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transition: all .3s;
  transition: all .3s;  
}

#footer .upper nav ul li a:hover::after {
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  right: -1em;
}

#footer .lower {
  background: #323232;
  padding: 1.5em 0 2em;
}

#footer .lower p {
  font-size: 1.4em;
  font-weight: 500;
  display: inline-block;
  margin-right: 4em;
}

#footer .lower p:last-child {
  margin-right: 0;
}

#footer .lower p a {
  position: relative;
  padding-right: 1.5em;
}

#footer .lower p a::after {
  content: "";
  width: 1.2em;
  height: 1.2em;
  background-image:url(./images/footer_lower_icon.png);
  background-position:center;
  background-repeat:no-repeat;
  -moz-background-size:contain;
  background-size:contain;
  position: absolute;
  top: 60%;
  right: 0%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

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

  #footer .upper {
    padding-top: 3em;
    padding-bottom: 3em;
  }

  #footer .upper .logo {
    width: 100%;
    margin-bottom: 3em;
  }

  #footer .upper .logo a {
    display: block;
    width: 26em;
    margin: 0 auto;
  }

  #footer .upper nav {
    width: 100%;
  }

  #footer .upper nav .parent > li {
    width: 100%;
    margin-bottom: 1em;
  }

  #footer .upper nav .parent > li:first-child {
    width: 100%;
  }

  #footer .upper nav .parent > li:nth-child(3) {
    width: 100%;
  }

  #footer .upper nav .parent > li:last-child {
    margin-bottom: 0;
  }
 
  #footer .upper nav .parent > li .div_name a {
    font-size: 1.8em;
  }

  #footer .upper nav .child > li {
    margin-bottom: 1em;
  }

  #footer .upper nav .child > li a {
    font-size: 1.6em;
  }

  #footer .lower {
    padding: 1em 0;
  }

  #footer .lower p {
    font-size: 1.2em;
    display: block;
    margin-right: 0;
    margin-bottom: 0.5em;
  }

}

/* ==============================================
 .gotop
=============================================== */

#top {
  position: relative;
}

.gotop {
  width: 10em;
  height: 10em;
  border-radius: 50%;
  border: 2px solid rgb(from #fff r g b / 0.5);
  background: rgb(from #000 r g b / 0.5);
  position: fixed;
  bottom: 2em;
  right: 2em;
  z-index: 10;
}

.gotop:hover {
  opacity: 1;
}

.gotop span {
  font-size: 2em;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

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

  .gotop {
    width: 5em;
    height: 5em;
    bottom: 1em;
    right: 1em;
  }

  .gotop span {
    font-size: 1.3em;
  }

}

/* ==============================================
 #column_single
=============================================== */

#column_single {
  background: #fbfbfb;
}

#column_single #sec01 {
  padding-top: 9em;
}

#column_single #sec01 .inner_1300 {
  width: 130em;
  margin: 0 auto;
}

#column_single #sec01 .main_img {
  width: 130em;
  margin-bottom: 3em;
}

#column_single #sec01 .title {
  font-size: 3.2em;
  font-weight: 600;
  color: #e60012;
  line-height: 1.6;
  text-align: center;
  margin-bottom: 1em;
}

#column_single #sec01 .cate {
  justify-content: center;
  flex-wrap: wrap;
}

#column_single #sec01 .cate.division {
  margin-bottom: 1em;
}

#column_single #sec01 .cate li {
  border-left: 1px solid #333;
  margin-bottom: 0.7em;
}

#column_single #sec01 .cate li:last-child {
  border-right: 1px solid #333;
}

#column_single #sec01 .cate li span {
  font-size: 2em;
  font-weight: 500;
  padding: 0 1em;
  line-height: 1;
}

#column_single #sec01 .time {
  text-align: center;
  font-size: 2em;
  margin: 1em 0;
}


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

  #column_single #sec01 {
    padding-top: 3em;
  }

  #column_single #sec01 .inner_1300 {
    width: 100%;
  }

  #column_single #sec01 .main_img {
    width: 100%;
    margin-bottom: 2em;
  }

  #column_single #sec01 .title {
    font-size: 1.6em;
    text-align: left;
  }

  #column_single #sec01 .cate {
    flex-wrap: wrap;
  }

  #column_single #sec01 .cate.division {
    justify-content: center;
  }

  #column_single #sec01 .cate.category {
    justify-content: flex-start;
  }

  #column_single #sec01 .cate li span {
    font-size: 1.4em;
  }

  #column_single #sec01 .time {
    font-size: 1.4em;
    margin: 0.7em 0 1em;
  }

}


/* #column_single #sec01 .addtoany_shortcode
----------------------------------------------- */

#column_single #sec01 .addtoany_shortcode {
  text-align: center;
  margin-bottom: 6em;
}

#column_single #sec01 .addtoany_shortcode,
#column_single #sec01 .addtoany_shortcode .addtoany_list a {
  font-size: 16px;
}

@media screen and (max-width: 1800px) {
  #column_single #sec01 .addtoany_shortcode,
  #column_single #sec01 .addtoany_shortcode .addtoany_list a {
    font-size: calc(16vw / 18);
  }
}

@media screen and (max-width: 768px) {
  #column_single #sec01 .addtoany_shortcode,
  #column_single #sec01 .addtoany_shortcode .addtoany_list a {
    font-size: calc(10vw / 3.75);
  }
}

#column_single #sec01 .addtoany_shortcode .addtoany_list {
  line-height: 3.2em !important;
}

#column_single #sec01 .addtoany_shortcode .addtoany_list a span {
  border-radius: 50% !important;
  padding: 0.2em;
  width: 3.2em !important;
  height: 3.2em !important;
  line-height: 3.2em !important;
  background-size: 3.2em !important;
}

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

  #column_single #sec01 .addtoany_shortcode {
    margin-bottom: 3em;
  }

  #column_single #sec01 .addtoany_shortcode .addtoany_list a span {
    border-radius: 50% !important;
    padding: 0.2em;
  }

}

/* #column_single #sec01 #toc
----------------------------------------------- */

#column_single #sec01 #toc {
  display: none;
}

#column_single #sec01 #toc.display {
  display: block;
}

#column_single #sec01 #toc {
  background: #fff;
  padding: 6em 8em 4em;
  border-radius: 1em;
  border: 1px solid #ededed;
  margin-bottom: 6em;
}

#column_single #sec01 #toc .mokuji {
  font-size: 2.4em;
  font-weight: bold;
  line-height: 1;
  position: relative;
  padding-left: 2.5em;
  margin-bottom: 2em;
}

#column_single #sec01 #toc .mokuji::before {
  content: "";
  width: 1.8em;
  height: 1.8em;
  background-image:url(./images/toc_icon.png);
  background-position:center;
  background-repeat:no-repeat;
  -moz-background-size:contain;
  background-size:contain;
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

#column_single #sec01 #toc .mokuji::after {
  content: "";
  width: 26em;
  height: 0.1em;
  background: #7f7f7f;
  position: absolute;
  top: 50%;
  left: 6em;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

#column_single #sec01 #toc ol li a {
  font-size: 2em;
  font-weight: bold;
  display: inline-block;
}

#column_single #sec01 #toc > ol > li {
  padding: 0 1em 0.5em 2em;
  border-bottom: 1px solid #7f7f7f;
  margin-bottom: 1em;
}

#column_single #sec01 #toc > ol > ol {
  margin-left: 3em;
}

#column_single #sec01 #toc > ol > ol > li {
  padding: 0 1em;
  margin-bottom: 1em;
}

#column_single #sec01 #toc > ol > ol > li a {
  font-weight: 500;
  position: relative;
  padding-left: 1.5em;
}

#column_single #sec01 #toc > ol > ol > li a::before {
  content: "・";
  font-weight: bold;
  position: absolute;
  top: 0;
  left: 0;
}

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

  #column_single #sec01 #toc {
    padding: 3em 2em;
    border-radius: 0.5em;
    margin-bottom: 3em;
  }

  #column_single #sec01 #toc .mokuji {
    font-size: 1.8em;
  }

  #column_single #sec01 #toc .mokuji::after {
    width: 9em;
  }

  #column_single #sec01 #toc > ol > li {
    padding: 0 0 0.5em 0;
  }

  #column_single #sec01 #toc > ol > ol {
    margin-left: 0;
  }

  #column_single #sec01 #toc > ol > ol > li {
    padding: 0;
  }

  #column_single #sec01 #toc ol li a {
    font-size: 1.4em;
  }

  #column_single #sec01 #toc > ol > ol > li a {
    font-size: 1.3em;
  }

}

/* #column_single #sec01 #writer
----------------------------------------------- */

#column_single #sec01 #writer {
  background: #fff;
  padding: 6em 8em 4em;
  border-radius: 1em;
  border: 2px solid #eaeaea;
  margin-bottom: 6em;
}

#column_single #sec01 #writer .img {
  width: 20%;
}

#column_single #sec01 #writer .right {
  width: 75%;
}

#column_single #sec01 #writer .img img {
  border-radius: 50%;
}

#column_single #sec01 #writer .right .head {
  margin-bottom: 0.5em;
}

#column_single #sec01 #writer .right .head span {
  background: #cacaca;
  font-size: 1.6em;
  font-weight: bold;
  letter-spacing: 0.1em;
  border-radius: 0.8em;
  display: inline-block;
  line-height: 1;
  padding: 0.5em 1em 0.7em;
}

#column_single #sec01 #writer .right .nickname,
#column_single #sec01 #writer .right .job_title  {
  font-size: 1.8em;
  font-weight: bold;
}

#column_single #sec01 #writer .right .job_title  {
  margin-bottom: 0.5em;
}

#column_single #sec01 #writer .right .profile  {
  font-size: 1.6em;
  font-weight: 500;
}


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

  #column_single #sec01 #writer {
    padding: 3em 2em;
    border-radius: 0.5em;
    margin-bottom: 3em;
  }

  #column_single #sec01 #writer .img {
    width: 100%;
  }

  #column_single #sec01 #writer .right {
    width: 100%;
  }

  #column_single #sec01 #writer .img img {
    width: 50%
  }

  #column_single #sec01 #writer .right .head span {
    font-size: 1.3em;
    border-radius: 0.4em;
  }

  #column_single #sec01 #writer .right .nickname,
  #column_single #sec01 #writer .right .job_title  {
    font-size: 1.6em;
  }

  #column_single #sec01 #writer .right .profile  {
    font-size: 1.3em;
  }

}

/* #column_single #sec01 #writer
----------------------------------------------- */

#column_single #sec01 .service {
  background: #fff;
  padding: 3em 6em 4em;
  border-radius: 2em;
  border: 3px solid #e60012;
  margin-bottom: 6em;
  text-align: center;
}

#column_single #sec01 .service h3 {
  font-size: 2.4em;
  font-weight: bold;
  color: #e60012;
  margin-bottom: 0.7em;
}

#column_single #sec01 .service ul {
  justify-content: center;
  flex-wrap: wrap;
}

#column_single #sec01 .service ul li {
  margin-right: 2em;
}

#column_single #sec01 .service ul li:last-child {
  margin-right: 0;
}

#column_single #sec01 .service ul li a {
  color: #787878;
  font-size: 2em;
  font-weight: bold;
}

#column_single #sec01 .service ul li a:hover {
  color: #787878;
  text-decoration: underline;
  opacity: 1;
}


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

  #column_single #sec01 .service {
    padding: 1.5em 1.6em;
    border-radius: 1em;
    margin-bottom: 3em;
  }

  #column_single #sec01 .service h3 {
    font-size: 1.5em;
    margin-bottom: 0.4em
  }

  #column_single #sec01 .service ul li {
    margin-right: 1em;
  }

  #column_single #sec01 .service ul li a {
    font-size: 1.3em;
  }

}

/* #column_single #sec02
----------------------------------------------- */

#column_single #sec02 {
  padding-bottom: 0;
  background: #fff;
}

#column_single #sec02 h2 {
  color: #e60012;
  font-size: 3.6em;
  font-weight: bold;
  letter-spacing: 0.1em;
  margin-bottom: 1em;
  text-align: center;
}

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

  #column_single #sec02 h2 {
    font-size: 2.4em;
  }

}


/* .column_list
----------------------------------------------- */

.column_list {
  flex-wrap: wrap;
  justify-content: flex-start;
}

.column_list li {
  width: 32%;
  margin-right: 1.8%;
  margin-bottom: 5em;
}

.column_list li:nth-child(3n) {
  margin-right: 0;
}

.column_list li .img {
  position: relative;
}

.column_list li .img .video {
  position: absolute;
  bottom: 1em;
  left: 1em;
  width: 30%;
}

.column_list li .content {
  padding: 2em 1.5em 0;
}

.column_list li .content .cate span {
  display: inline-block;
  background: #227fb2;
  color: #fff;
  font-size: 1.6em;
  font-weight: bold;
  line-height: 1;
  padding: 0.5em 1em;
  border-radius: 0.5em;
  margin: 0 1em 0.7em 0;
}

.column_list li .content .cate span:last-child {
  margin-right: 0;
}

.column_list li .content .title {
  font-size: 2em;
  font-weight: bold;
  margin-bottom: 0.5em;
}

.column_list li .content .date {
  font-size: 2em;
  font-weight: bold;
  color: #787878;
}

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

  .column_list li {
    width: 100%;
    margin-right: 0;
    margin-bottom: 3em;
  }

  .column_list li .img .division span {
    font-size: 1.3em;
  }

  .column_list li .content {
    padding: 1.5em 0 0;
  }

  .column_list li .content .cate span {
    font-size: 1.2em;
  }

  .column_list li .content .title {
    font-size: 1.4em;
  }

  .column_list li .content .date {
    font-size: 1.4em;
  }
}

/* .column_list li .img .division（現在は非表示）
----------------------------------------------- */

.column_list li .img .division {
  display: none;
}
/* 
.column_list li .img .division {
  position: absolute;
  top: 0;
  left: 0;
}

.column_list li .img .division span {
  display: inline-block;
  color: #fff;
  font-size: 1.8em;
  font-weight: bold;
  padding: 0.5em 2em;
  background: #e60012;
}

.column_list li .img .division span.research-and-development {
  background: #e60012;
}

.column_list li .img .division span.it-service {
  background: #7ecef4;
}

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

  .column_list li .img .division span {
    font-size: 1.3em;
  }

} */

/* .column_list li .img .division の代わりのマーカー
----------------------------------------------- */

.column_list li .img::before {
  content: "";
  width: 0;
	height: 0;
	border-style: solid;
	border-width: 6em 6em 0 0;
	border-color: #e60012 transparent transparent transparent;
  position: absolute;
  top: 0;
  left: 0;
}

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

  .column_list li .img::before {
    border-width: 3em 3em 0 0;
  }
}

/* ==============================================
 .freeeditor
=============================================== */

.freeeditor h1 {
  color: #e60012;
	font-size: 3.6em;
	font-weight: bold;
  line-height: 1.4;
  padding: 0.3em 0;
  margin-bottom: 1em;
}

.freeeditor h2 {
  color: #e60012;
	font-size: 3em;
	font-weight: bold;
  line-height: 1.4;
  margin-bottom: 1em;
  padding: 0.3em 0 0.3em 0.5em;
  border-top: 2px solid #e60012;
  border-bottom: 2px solid #e60012;
}

.freeeditor h3 {
  color: #e60012;
	font-size: 2.7em;
	font-weight: bold;
  line-height: 1.4;
  margin-bottom: 1em;
}

.freeeditor h4 {
  color: #e60012;
	font-size: 2.4em;
	font-weight: bold;
  line-height: 1.4;
  margin-bottom: 1em;
}

.freeeditor h5 {
  color: #e60012;
	font-size: 2.2em;
	font-weight: bold;
  line-height: 1.4;
  margin-bottom: 1em;
}

.freeeditor p {
  font-size: 1.8em;
  margin-bottom: 1.5em;
}

.freeeditor strong {
	font-weight: bold;
}

.freeeditor a {
  color: #ff3c3c;
  font-weight: bold;
  text-decoration: underline;
}

.freeeditor a:hover {
  opacity: 1;
  text-decoration: none;
}

.freeeditor img.alignright { display: block; margin: 0 0 1.5em auto; }/* 配置位置 右 */

.freeeditor img.alignleft { display: block; margin: 0 auto 1.5em 0; }/* 配置位置 左 */

.freeeditor img.aligncenter { display: block; margin: 0 auto 1.5em; }/* 配置位置 中央 */

.freeeditor img.size-large {
  max-width: 100%;
}

.freeeditor img.size-medium {
  max-width: 60%;
}

.freeeditor img.size-thumbnail {
  max-width: 35%;
}

article.page .freeeditor .youtube {
  width: 90em;
  margin: 0 auto 3em;
}

article.page .freeeditor .youtube .canvas {
	position: relative;
	padding: 0 0 56%;
	height: 0;
	overflow: hidden;
}

article.page .freeeditor .youtube .canvas iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}

article.page .freeeditor .video {
  width: 90em;
  margin: 0 auto 3em;
}

article.page .freeeditor .video .canvas {
	position: relative;
	padding: 0 0 56%;
	height: 0;
	overflow: hidden;
}

article.page .freeeditor .video video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}

.freeeditor p iframe,
.freeeditor p iframe.wp-embedded-content {
  width: 100% !important;
  height: 37em !important;
}


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

  .freeeditor h1 {
    font-size: 2em;
  }
  
  .freeeditor h2 {
    font-size: 1.8em;
  }
  
  .freeeditor h3 {
    font-size: 1.7em;
  }
  
  .freeeditor h4 {
    font-size: 1.6em;
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: 1em;
  }
  
  .freeeditor h5 {
    font-size: 1.5em;
  }
  
  .freeeditor p {
    font-size: 1.4em;
  }

  .freeeditor img.size-medium {
    max-width: 80%;
  }
  
  .freeeditor img.size-thumbnail {
    max-width: 55%;
  }

  article.page .freeeditor .youtube {
    width: 100%;
    margin-bottom: 2em;
  }
  
  article.page .freeeditor .video {
    width: 100%;
    margin-bottom: 2em;
  }

  /* .freeeditor iframe,
  .freeeditor iframe.wp-embedded-content {
    width: 100% !important;
  } */

  .freeeditor p iframe,
  .freeeditor p iframe.wp-embedded-content {
    width: 100% !important;
    height: 13.5em !important;
  }

}

/* ==============================================
  shingle pagenavi
=============================================== */

.pagenavi {
  background: #eaeaea;
  color: #787878;
  padding: 1em 0;
  font-size: 2.4em;
  display: flex;
  justify-content: flex-start;
  justify-content: center;
}

.pagenavi span a {
  display: inline-block;
  font-weight: bold;
}

.pagenavi span a,
.pagenavi span a:hover {
  color: #787878;
}

.pagenavi .prev,
.pagenavi .gotolist,
.pagenavi .next {
  /* width: 31%; */
}

.pagenavi .gotolist {
  text-align: center;
  margin: 0 2em;
}

.pagenavi .next {
  text-align: right;
}

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

  .pagenavi {
  	font-size: 1.3em;
  }

}

/* ==============================================
  wp-pagenavi
=============================================== */

.wp-pagenavi_block .wp-pagenavi {
	text-align: center;
  position: relative;
}

.wp-pagenavi_block .wp-pagenavi span,
.wp-pagenavi_block .wp-pagenavi a {
  padding: 0.5em 0.8em;
  border: none;
  border-left: 1px solid #000;
  color: #000;
  font-size: 2em;
  line-height: 1;
  display: inline-block;
}

.wp-pagenavi_block .wp-pagenavi .pages {
  background: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  box-shadow: none;
  border: none;
}

.wp-pagenavi_block .wp-pagenavi a.previouspostslink {
  border-left: none;
}

.wp-pagenavi_block .wp-pagenavi span.current {
    background: #000;
    color: #fff;
}

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

  .wp-pagenavi_block .wp-pagenavi span,
  .wp-pagenavi_block .wp-pagenavi a {
    font-size: 1.4em;
    margin-bottom: 0.7em;
  }
}


/* ==============================================
 article.page 
=============================================== */

/* article.page #page_mv
----------------------------------------------- */

#page_mv {
  height: 40em;
  background-image:url(./images/mv_img.jpg);
  background-position: center 20%;
  background-repeat:no-repeat;
  -moz-background-size:cover;
  background-size:cover;
}

#page_mv .inner_1200 {
  position: relative;
  height: 100%;
}

#page_mv h2 {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

#page_mv h2 span {
  display: inline-block;
  line-height: 1;
  background: #e60012;
  color: #fff;
  padding: 0.6em 1em;
  font-size: 4.2em;
  font-weight: bold;
}

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

  #page_mv {
    height: 20em;
  }

  #page_mv h2 {
    left: 1.6em;
  }

  #page_mv h2 span {
    font-size: 1.8em;
  }

}

/* #not_found
----------------------------------------------- */

#not_found #sec01 {
  padding: 12em 0;
}

#not_found .error p {
  font-size: 2.8em;
}

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

  #not_found #sec01 {
    padding: 6em 0;
  }

  #not_found .error p {
    font-size: 1.4em;
  }

}


/* ==============================================
 #column_archive 
=============================================== */

/* #column_archive #mv
----------------------------------------------- */

#column_archive #mv {
  height: 48em;
  background-position: center 20%;
}

#column_archive #mv .inner h2 {
  top: 5em;
}

#column_archive #mv .inner h2 .h2_02 .h2_02_01 {
  font-size: 8em;
}

#column_archive #mv .inner h2 .h2_02 .h2_02_02 {
  font-size: 5em;
}

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

  #column_archive #mv {
    height: 25em;
    background-position: center 40%;
  }

  #column_archive #mv .inner h2 {
    top: 8em;
  }

  #column_archive #mv .inner h2 .h2_01 {
    margin-bottom: 1em;
  }

  #column_archive #mv .inner h2 .h2_01 .h2_01_01 {
    font-size: 2em;
  }

  #column_archive #mv .inner h2 .h2_01 .h2_01_02 {
    font-size: 1.4em;
  }

  #column_archive #mv .inner h2 .h2_02 .h2_02_01 {
    font-size: 3em;
  }

  #column_archive #mv .inner h2 .h2_02 .h2_02_02 {
    font-size: 2em;
  }

}

/* #column_archive #sec01
----------------------------------------------- */

#column_archive #sec01{
  position: relative;
  z-index: 1;
  background: #fff;
}

#column_archive #sec01 h1 {
  text-align: center;
  font-size: 4.2em;
  font-weight: bold;
  margin-bottom: 1em;
}

#column_archive #sec01 .cate_block h3 {
  width: 80%;
  margin: 0 auto 3em;
}

#column_archive #sec01 .cate_block h3 span {
  font-size: 3.2em;
  font-weight: bold;
}

#column_archive #sec01 .cate_block h3.horizontal-line span:before,
#column_archive #sec01 .cate_block h3.horizontal-line span:after {
  border: 1px solid #303030;
}

#column_archive #sec01 .division {
  margin-bottom: 2em;
}

#column_archive #sec01 .cate_block ul {
  flex-wrap: wrap;
  justify-content: center;
}

#column_archive #sec01 .division ul li {
  width: 24em;
  margin-right: 2em;
  margin-bottom: 1.5em;
}

#column_archive #sec01 .division ul li:last-child {
  margin-right: 0;
}

#column_archive #sec01 .division ul li a {
  display: block;
  text-align: center;
  border: 1px solid #f8b551;
  color: #f8b551;
  font-size: 2.6em;
  font-weight: 500;
  line-height: 1;
  padding: 0.5em;
}

#column_archive #sec01 .division ul li a:hover,
#column_archive #sec01 .division ul li a.current {
  opacity: 1;
  background: #f8b551;
  color: #fff;
}

#column_archive #sec01 .category ul li {
  border-left: 1px solid #333;
  margin-bottom: 1em;
}

#column_archive #sec01 .category ul li:last-child {
  border-right: 1px solid #333;
}

#column_archive #sec01 .category ul li a {
  display: block;
  font-size: 2.2em;
  font-weight: 500;
  padding: 0 1em;
  line-height: 1;
}

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

  #column_archive #sec01 h1 {
    font-size: 2em;
  }

  #column_archive #sec01 .cate_block h3 {
    width: 100%;
    margin: 0 auto 2em;
  }

  #column_archive #sec01 .cate_block h3 span {
    font-size: 1.6em;
  }

  #column_archive #sec01 .division ul li {
    width: 80%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 1em;
  }

  #column_archive #sec01 .division ul li:last-child {
    margin-right: auto;
  }

  #column_archive #sec01 .division ul li a {
    font-size: 1.4em;
    padding: 0.8em 0.5em;
  }

  #column_archive #sec01 .category ul {
    justify-content: flex-start;
  }

  #column_archive #sec01 .category ul li {
    border: none;
    margin-right: 1em;
  }

  #column_archive #sec01 .category ul li:last-child {
    border: none;
    margin-right: 0;
  }

  #column_archive #sec01 .category ul li a {
    font-size: 1.4em;
    background: #f0f0f0;
    padding: 0.5em 0.7em;
  }

  #column_archive #sec01 .category ul li a.current {
    background: #333;
    color: #fff;
  }

}

/* #column_archive #sec02
----------------------------------------------- */

#column_archive #sec02 {
  margin-top: -12em;
  padding-top: 20em;
  background: #fbfbfb;
}

#column_archive #sec02 .top_cate_title h2 {
  text-align: center;
  margin-bottom: 6em;
}

#column_archive #sec02 .top_cate_title h2 span {
  display: inline-block;
  font-size: 3.6em;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.1em;
  background: #e60012;
  color: #fff;
  padding: 0.4em 2em;
}

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

  #column_archive #sec02 {
    margin-top: -6em;
    padding-top: 6em;
  }

  #column_archive #sec02 .top_cate_title h2 {
    margin-bottom: 3em;
  }

  #column_archive #sec02 .top_cate_title h2 span {
    font-size: 1.8em;
    padding: 0.5em 1em;
  }

}

/* #column_archive #sec03
----------------------------------------------- */

#column_archive #sec03 h3 {
  text-align: center;
  font-size: 4.8em;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 1em;
}

#column_archive #sec03 ul {
  justify-content: center;
  flex-wrap: wrap;
}

#column_archive #sec03 ul li {
  border-left: 1px solid #333;
  margin-bottom: 1em;
}

#column_archive #sec03 ul li:last-child {
  border-right: 1px solid #333;
}

#column_archive #sec03 ul li a {
  display: block;
  font-size: 2.2em;
  font-weight: 500;
  padding: 0 1em;
  line-height: 1;
}

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

  #column_archive #sec03 h3 {
    font-size: 2.4em;
  }

  #column_archive #sec03 ul li a {
    font-size: 1.6em;
  }

}

/* ==============================================
 title 
=============================================== */

/* title
----------------------------------------------- */

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

}


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

}

/*
  body {
    font-size: calc(18vw / 19.2);
  }

  body {
    font-size: calc(16vw / 3.8);
  }

#feature {
  font-size: calc(10vw / 15);
}

@media (max-width: 767px) {
  
  #feature {
    font-size: calc(10vw / 3.8);
  }
  
}

*/