@charset "utf-8";

body {
  padding: 0; margin: 0; width: 100%; overflow-x: hidden;
/*  font-family: Futura, Century Gothic, 'MS ゴシック', Arial, sans-serif; */
  font-family: "Helvetica Neue", Helvetica, Arial, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic",游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'MS ゴシック', sans-serif;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

html { height: 100%; }
a {
  color: #000;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
a:hover { border-bottom: 1px solid #000; }
a.op,
a .op {
  -webkit-transition: opacity .3s linear 0s;
  -moz-transition: opacity .3s linear 0s;
  -o-transition: opacity .3s linear 0s;
  transition: opacity .3s linear 0s;
}
a.op:hover,
a .op:hover { opacity: .55; }
@media all and (max-width: 767px) {
a.op:active,
a .op:active { opacity: .55; }
a.op:hover,
a .op:hover { opacity: 1; }
}
/*   font-size指定   */
/* fs1 */
.fs1_logo{ height: 21px; }
.fs1{ height: 39px; }
.fs1.sp{ display: none; }
@media all and (max-width: 1280px) {
  .fs1_logo{ height: calc(21vw / 1280 * 100); }
  .fs1{ height: calc(39vw / 1280 * 100); }
}
@media all and (max-width: 767px) {
  .fs1_logo{ height: calc(14vw / 375 * 100); }
  .fs1{ height: calc(24vw / 375 * 100); }
  .fs1.project{ height: calc(29vw / 375 * 100); }
  .fs1.pc{  display: none; }
  .fs1.sp{  display: block; }
}
/* PC fs2 */
.fs2{
  font-size: 24px;
  line-height: 36px;
}
@media screen and (max-width:1280px){
  .fs2{
    font-size: calc(24vw / 1280 * 100);
    line-height: calc(36vw / 1280 * 100);
  }
}
@media all and (max-width: 767px)  {
  .fs2{
    font-size: calc(16vw / 375 * 100);
    line-height: 1;
  }
}

/* fs3 */
.fs3{
  font-size: 16px;
  line-height: 30px;
}
@media screen and (max-width:1280px){
  .fs3{
    font-size: calc(16vw / 1280 * 100);
    line-height: calc(30vw / 1280 * 100);
  }
}
@media all and (max-width: 767px)  {
  .fs3{
    font-size: calc(14vw / 375 * 100);
    line-height: 1;
  }
}

/* fs4 */
.fs4{
  font-size: 18px;
  line-height: 28px;
}
@media screen and (max-width:1280px){
  .fs4{
    font-size: calc(18vw / 1280 * 100);
    line-height: calc(28vw / 1280 * 100);
  }
}
@media all and (max-width: 767px)  {
  .fs4{
    font-size: calc(20vw / 375 * 100);
    line-height: calc(34vw / 375 * 100);
  }
}

@media all and (max-width: 767px)  {
  .fs2_sp{
    font-size: calc(32vw / 800 * 100);
    line-height: calc(52vw / 800 * 100);
  }
}
@media all and (max-width: 767px)  {
  .fs3_sp{
    font-size: calc(24vw / 800 * 100);
    line-height: calc(44vw / 800 * 100);
  }
}
/*  /font-size指定   */

/*   余白指定   */
@media screen and (max-width:1280px){
  .content-top{margin-top: calc(54vw / 1280 * 100);}

  .menu .content-top {
    margin-top: 0;
  }
}
@media screen and (max-width: 767px){
  /* .content-top{margin-top: calc(36vw / 375 * 100);} */
  .content-top{margin-top:0;}
}

/*   /余白指定   */

.lang {
  position: relative;
  overflow: hidden;
  -webkit-transition: height .3s ease-in-out 0s;
  -moz-transition: height .3s ease-in-out 0s;
  -o-transition: height .3s ease-in-out 0s;
  transition: height .3s ease-in-out 0s;
}
.lang .jp,
.lang .en {
  position: absolute;
  top: 0;
}
.jp,
.en {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity .3s linear 0s, visibility 0s linear .3s;
  -moz-transition: opacity .3s linear 0s, visibility 0s linear .3s;
  -o-transition: opacity .3s linear 0s, visibility 0s linear .3s;
  transition: opacity .3s linear 0s, visibility 0s linear .3s;
}
.jp,
.font_jp { font-family: "Helvetica Neue", Helvetica, YuGothic, "游ゴシック体", "Yu Gothic Medium", "游ゴシック Medium", "YuGothic", "游ゴシック", "メイリオ", sans-serif; }
.en,
.font_en { font-family: "Helvetica Neue", Helvetica, Arial, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic",游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'MS ゴシック', sans-serif;}
img { display: block; }
body.lang_jp .jp,
body.lang_en .en {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity .3s linear 0s;
  -moz-transition: opacity .3s linear 0s;
  -o-transition: opacity .3s linear 0s;
  transition: opacity .3s linear 0s;
}
.switch_lang{
  font-size: 0;
  display: block;
  width: 22px;
  height: 15px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  padding-bottom: 3px;
}
body.lang_jp .switch_lang[data-lang="jp"]{ background-image: url(./img/jp_on.png); }
body.lang_jp .switch_lang[data-lang="en"]{ background-image: url(./img/en_off.png); }
body.lang_en .switch_lang[data-lang="jp"]{ background-image: url(./img/jp_off.png); }
body.lang_en .switch_lang[data-lang="en"]{ background-image: url(./img/en_on.png); }
body.lang_jp .switch_lang-wh[data-lang="jp"]{ background-image: url(./img/jp_on-wh.png); }
body.lang_jp .switch_lang-wh[data-lang="en"]{ background-image: url(./img/en_off-wh.png); }
body.lang_en .switch_lang-wh[data-lang="jp"]{ background-image: url(./img/jp_off-wh.png); }
body.lang_en .switch_lang-wh[data-lang="en"]{ background-image: url(./img/en_on-wh.png); }
@media screen and (max-width:1280px){
  .switch_lang{
    width: calc(22vw / 1280 * 100);
    height: calc(15vw / 1280 * 100);
    padding-bottom: calc(3vw / 1280 * 100);
  }
}
@media screen and (max-width: 767px){
  .switch_lang{
    width: calc(22vw / 375 * 100);
    height: calc(15vw / 375 * 100);
    padding-bottom: 0;
  }
}

.switch_lang:hover{
  border-bottom: 1px solid #000;
}
@media screen and (max-width: 767px){
  .switch_lang:hover{border-bottom: 0;}
}

@media all and (min-width: 801px) {
  .sp { display: none !important; }
}
/*
@media all and (max-width: 767px) {
.pc { display: none !important; }
.switch_lang:hover,
body.lang_jp .switch_lang[data-lang="jp"],
body.lang_en .switch_lang[data-lang="en"] { border-bottom-width: calc(2vw / 800 * 100); }
}
*/
.br::before {
  content: "\A";
  white-space: pre;
}
/* header */
.header {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  padding: 16px 28px 33px;/* bottomは黒背景ページのコンテンツとの余白を白にするため */
  background-color: #fff;
  z-index: 30;
/*  position: relative;*/
  position: absolute;
  top: 0;
  font-weight: bold;
}
@media all and (max-width: 1280px) {
  .header {padding: calc(16vw / 1280 * 100) calc(28vw / 1280 * 100) calc(33vw / 1280 * 100);}
}
@media all and (max-width: 767px) {
  .header {
    position: fixed;
    top: 0;
    padding: 0 calc(19vw / 375 * 100);
    border-bottom: solid 1px #e3e3e3;
  }
}

.header h1 {}
@media all and (max-width: 767px) {
  .header h1 {
    padding: calc(16vw / 375 * 100) 0;
  }
}

.header h1 a:hover { border-bottom: 1px solid transparent; }

.menu_btn {
  width: 30px;
  height: 30px;
  display: none;
  position: relative;
  background-image: url(./svg/btn_menu.svg);
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: 30px 20px;
  -moz-background-size: 30px 20px;
  -o-background-size: 30px 20px;
  background-size: 30px 20px;
}
.menu_btn_wrapper {
  height: 30px;
}

@media all and (max-width: 767px) {
  .menu_btn {
    display: block;
  }
}

.page-index .menu_btn {
  display: block;
}
.menu_btn:hover { border-bottom: 1px solid transparent; }
.menu_btn::after {
  content: "";
  width: 30px;
  height: 30px;
  background-color: #fff;
  background-image: url(./svg/btn_close.svg);
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: 24px;
  -moz-background-size: 24px;
  -o-background-size: 24px;
  background-size: 24px;
  position: absolute;
  top: 0; left: 0;
  opacity: 0;
  -webkit-transition: opacity .3s linear 0s;
  -moz-transition: opacity .3s linear 0s;
  -o-transition: opacity .3s linear 0s;
  transition: opacity .3s linear 0s;
}
body.menu_view .menu_btn::after { opacity: 1; }
@media all and (max-width: 1280px) {
  .menu_btn {
    width: calc(30vw / 1280 * 100);
    height: calc(30vw / 1280 * 100);
    -webkit-background-size: calc(30vw / 1280 * 100) calc(20vw / 1280 * 100);
    -moz-background-size: calc(30vw / 1280 * 100) calc(20vw / 1280 * 100);
    -o-background-size: calc(30vw / 1280 * 100) calc(20vw / 1280 * 100);
    background-size: calc(30vw / 1280 * 100) calc(20vw / 1280 * 100);
  }
  .menu_btn::after {
    width: calc(30vw / 1280 * 100);
    height: calc(30vw / 1280 * 100);
    -webkit-background-size: calc(24vw / 1280 * 100);
    -moz-background-size: calc(24vw / 1280 * 100);
    -o-background-size: calc(24vw / 1280 * 100);
    background-size: calc(24vw / 1280 * 100);
  }
  .menu_btn_wrapper {
    height: calc(30vw / 1280 * 100);
  }
}
/* menu */
.menu {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  top: 0;
  right: 0;
  background-color: #fff;
  z-index: 25;
  -webkit-transition: -webkit-transform .3s ease-in-out 0s;
  -moz-transition: -moz-transform .3s ease-in-out 0s;
  -o-transition: -o-transform .3s ease-in-out 0s;
  transition: transform .3s ease-in-out 0s;
  -webkit-transform: translate3d(0,-100%,0);
  -moz-transform: translate3d(0,-100%,0);
  -o-transform: translate3d(0,-100%,0);
  transform: translate3d(0,-100%,0);
}
@media all and (max-width: 767px) {
  .menu {
    padding: calc(71vw / 375 * 100) 0 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    position: fixed;
    overflow: auto;
  }
}

.menu .inner {
  height: 100%;
  display: flex;
  flex-direction: column;
}
@media all and (max-width: 767px) {
  .menu .inner {
    position: relative;
    height: auto;
  }
}

body.menu_view .menu {
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
body.menu_view { overflow: hidden; }

.header .icon-sns {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 103px;
  top: 25px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
}

.page-index .header .icon-sns {
  right: 158px;
}

.header .icon-sns li {
  margin-right: 12px;
}

.header .icon-sns li:last-child {
  margin-right: 0;
}

@media all and (max-width: 1280px) {
  .header .icon-sns {
    right: calc(103vw / 1280 * 100);
    top: calc(22vw / 1280 * 100);
  }

  .page-index .header .icon-sns {
    right: calc(158vw / 1280 * 100);
  }

  .header .icon-sns li {
    margin-right: calc(12vw / 1280 * 100);
  }
  .header .icon-insta a img {
    width: calc(15vw / 1280 * 100);
    height: auto;
  }
  .header .icon-facebook a img {
    width: calc(15vw / 1280 * 100);
    height: auto;
  }
  .header .icon-linkedin a img {
    width: calc(15vw / 1280 * 100);
    height: auto;
  }
}
@media all and (max-width: 767px) {
  .header .icon-sns {
    right: calc(133vw / 375 * 100);
    top: calc(15vw / 375 * 100);
  }
  .page-index .header .icon-sns {
    right: calc(133vw / 375 * 100);
  }
  .header .icon-sns li.icon-insta {
    margin-right: calc(6.5vw / 375 * 100);
  }
  .header .icon-insta a img{
    width: calc(16vw / 375 * 100);
  }
  .header .icon-facebook a img{
    width: calc(16vw / 375 * 100);
  }
  .header .icon-linkedin a img{
    width: calc(16vw / 375 * 100);
  }
}

.header .switches {
  position: absolute;
  right: 28px;
  top: 20px;
  height: 26px;
  display: flex;
  align-items: center;
}

.page-index .header .switches {
  right: 83px;
}

@media all and (max-width: 1280px) {
  .header .switches {
    top: calc(16vw / 1280 * 100);
    right: calc(28vw / 1280 * 100);
    height: calc(32vw / 1280 * 100);
  }
  .page-index .header .switches {
    right: calc(83vw / 1280 * 100);
  }
}
@media all and (max-width: 767px) {
  .header .switches {
    top: calc(17vw / 375 * 100);
    right: calc(64vw / 375 * 100);
    height: auto;
  }

  .page-index .header .switches {
    right: calc(64vw / 375 * 100);
  }
}

.header .switches li {
  float: left;
  font-weight: normal;
}

.header .switches li:not(:last-child) { padding-right: 8px; }
@media all and (max-width: 1280px) {
  .header .switches li:not(:last-child) { padding-right: calc(8vw / 1280 * 100); }
}
@media all and (max-width: 767px) {
  .header .switches li:not(:last-child) { padding-right: calc(16vw / 800 * 100); }
}

.global_navi_white {
  background: #fff;
}
.global_navi {
  padding-top: 94px;
  display: -webkit-flex;
  display: flex;
  margin: 0 28px;
}
@media all and (max-width: 1280px) {
  .global_navi {
    padding-top: calc(94vw / 1280 * 100);
    margin: 0 calc(28vw / 1280 * 100);
  }
}
@media all and (max-width: 767px) {
  .global_navi {
    display: block;
    padding: 0;
    margin: 0 calc(19vw / 375 * 100);
  }
}
.menu .inner .global_navi{
  margin-bottom: 48px;
}
@media all and (max-width: 1280px) {
  .menu .inner .global_navi{
    margin-bottom: calc(48vw / 1280 * 100);
  }
}
@media all and (max-width: 767px) {
  .menu .inner .global_navi{
    margin-bottom: 0;
  }
}

.global_navi li:not(:first-child) { padding-left: 50px; }
@media all and (max-width: 1280px) {
  .global_navi li:not(:first-child) { padding-left: calc(50vw / 1280 * 100); }
}
@media all and (max-width: 767px) {
  .global_navi li:not(:first-child) { padding-left: 0; }
  .global_navi li:nth-child(1){margin-bottom: calc(20vw / 375 * 100);}
  .global_navi li:nth-child(2){margin-bottom: calc(20vw / 375 * 100);}
  .global_navi li:nth-child(3){margin-bottom: calc(20vw / 375 * 100);}
  .global_navi li:nth-child(1) a{padding-bottom: calc(4vw / 375 * 100);}
  .global_navi li:nth-child(2) a{padding-bottom: calc(4vw / 375 * 100);}
  .global_navi li:nth-child(3) a{padding-bottom: calc(4vw / 375 * 100);}
  .global_navi li:nth-child(4) a{padding-bottom: calc(4vw / 375 * 100);}
}

.global_navi li a {
  display: inline-block;
  padding-bottom: 2px;
}

.global_navi--pages.single {
  padding-bottom: 47px
}
@media all and (max-width: 1280px) {
  .global_navi--pages.single {
    padding-bottom: calc(47vw / 1280 * 100);
  }
}

/*ページ上部のナビ*/
@media all and (max-width: 767px) {
  .global_navi--pages{
    display: none;
  }
}

.global_navi_local_header {
  display: none;
}
@media all and (max-width: 767px) {
  .global_navi_local_header {
    display: block;
    padding-top: calc(19vw / 375 * 100);
    padding-bottom: calc(19vw / 375 * 100);
    padding-left: calc(19vw / 375 * 100);
  }
}


.menu_block h2{
  margin-top: 15px;
  margin-bottom: 20px;/*  margin-bottom: 24px;*/
  line-height: 1;
  font-weight: bold;
}
@media all and (max-width: 1280px) {
  .menu_block h2{
    margin-top: calc(15vw / 1280 * 100);
    margin-bottom: calc(20vw / 1280 * 100);
  }
}
@media all and (max-width: 767px) {
  .menu_block h2{
    margin:0;
  }
}

.menu_block .office_detail{
  margin-top: -4px;
}
@media all and (max-width: 1280px) {
  .menu_block .office_detail{
    margin-top: calc(-4vw / 1280 * 100);
  }
}
@media all and (max-width: 767px) {
  .menu_block .office_detail{
    line-height: calc(22vw / 375 * 100);
    margin-top: calc(14vw / 375 * 100);
  }
}

.menu .office {
  display: -webkit-flex;
  display: flex;
  text-align: left;
  margin: 0 28px;
}
@media all and (max-width: 1280px) {
  .menu .office {
    margin: 0 calc(28vw / 1280 * 100);
  }
}
@media all and (max-width: 767px) {
  .menu .office {
    -webkit-order: 3;
    order: 3;
    display: block;
    margin: 0 calc(19vw / 375 * 100);
  }
}

.menu .office > div {
  width: 50%;
}

.menu .office .hoshino {
  border-top: 1px solid #fff;
  margin-right: 16px;
  color: #fff;
}
.menu .office .hopkins {
  margin-left: 16px;
  border-top: 1px solid #1e88e5;
  color: #1e88e5;
}
@media all and (max-width: 1280px) {
  .menu .office .hoshino { margin-right: calc(16vw / 1280 * 100); }
  .menu .office .hopkins { margin-left: calc(16vw / 1280 * 100); }
}
@media all and (max-width: 767px) {
  .menu .office .hoshino,
  .menu .office .hopkins {
    width: 100%;
    border-top: 1px solid #4c4c4c;
    padding-top: calc(6vw / 375 * 100);
    margin:0 0 calc(-4vw / 375 * 100);
  }
  .menu .office .hopkins {
    margin: calc(36vw / 375 * 100) 0 calc(-4vw / 375 * 100);
  }
}

.menu .office .flex {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin-top: 3px;
}
@media all and (max-width: 1280px) {
  .menu .office .flex {margin-top: calc(3vw / 1280 * 100);}
}
@media all and (max-width: 767px) {
  .menu .office .flex {
    margin-top: 0;
    display: block;
  }
}

.menu .office .flex .office_detail {
  width: calc(50% - 10px);
}
@media all and (max-width: 1280px) {
  .menu .office .flex .office_detail {
    width: calc(50% - 10vw / 1280 * 100);
  }
}
@media all and (max-width: 767px) {
  .menu .office .flex .office_detail {
    width: 100%;
    margin-top: calc(14vw / 375 * 100);
  }
}

.menu .office .flex .office_detail b{font-weight: bold;}

.menu .office a:hover { text-decoration: underline; }

.menu .office .address span { display: block; }
.menu .office .hoshino  a {color: #fff;}
.menu .office .hoshino .hopkins_tokyo{ color: #1e88e5; font-weight: bold;}
.menu .office .hopkins .address{ color: #1e88e5; }

.menu .news {
  margin: 56px 28px 0;
  border-top: 1px solid #fff;
  color: #fff;
}
@media all and (max-width: 1280px) {
  .menu .news { margin: calc(56vw / 1280 * 100) calc(28vw / 1280 * 100) 0; }
}
@media all and (max-width: 767px) {
  .menu .news {
    -webkit-order: 2;
    order: 2;
    border-top: 1px solid #4c4c4c;
    margin: calc(36vw / 375 * 100) calc(19vw / 375 * 100) 0;
    padding-top: calc(6vw / 375 * 100);
  }
}
.menu .news .flex {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin-top: -7px;
}
@media all and (max-width: 1280px) {
  .menu .news .flex { margin-top: calc(-7vw / 1280 * 100); }
}
@media all and (max-width: 767px) {
  .menu .news .flex {
    display: block;
    margin-top: calc(14vw / 375 * 100);
    margin-bottom: calc(36vw / 375 * 100);
  }
}

.menu .news ol {
  width: calc(100% - 330px);
}
@media all and (max-width: 1280px) {
  .menu .news ol { width: calc(100% - calc(330vw / 1280 * 100)); }
}
@media all and (max-width: 767px) {
  .menu .news ol {
    width: auto;
  }
}

.menu .news li:not(:first-child){margin-top:2px;}
@media all and (max-width: 1280px) {
  .menu .news li:not(:first-child){margin-top: calc(2vw / 1280 * 100);}
}
@media all and (max-width: 767px) {
  .menu .news li:not(:first-child){margin-top: calc(16vw / 375 * 100);}
}

.menu .news a {
  display: -webkit-flex;
  display: flex;
  border-bottom: 0;
  color: #fff;
}
@media all and (max-width: 767px) {
  .menu .news a {
    display: block;
    line-height: calc(22vw / 375 * 100);}
  }
}

.menu .news a:hover { border-bottom: 1px solid transparent; }
.menu .news time { margin-right: 35px; }
.menu .news .lang{width: 100%;}
.menu .news .title {
  letter-spacing: .5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
}
.menu .news time,
.menu .news .title { border-bottom: none; }
@media all and (max-width: 1280px) {
  .menu .news time { margin-right: calc(35vw / 1280 * 100); }
  .menu .news .title { letter-spacing: calc(.5vw / 1280 * 100); }
}

.menu .news a:hover time,
.menu .news a:hover .title span { text-decoration: underline;  }
.menu .news .small {
  display: none;
}
@media all and (max-width: 767px) {
  .menu .news .small {
    display: block;
    border-top: solid 1px #000;
    font-size: calc(10vw / 375 * 100);
    margin-top: calc(32vw / 375 * 100);
    padding-top: calc(11vw / 375 * 100);
  }
}

.menu .news .small small { display: block; }

/* footer */
.footer {
  text-align: right;
  padding-top: 100px;
}
@media all and (max-width: 1280px) {
  .footer {
    padding-top: calc(100vw / 1280 * 100);
  }
}
@media all and (max-width: 767px) {
  .footer{
    text-align: left;
    padding-top: calc(36vw / 375 * 100);
  }
}

.footer .small{
  font-size: 12px;
  margin: 0 28px;
  border-top: 1px solid #000;
  padding: 15px 0 64px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
@media all and (max-width: 1280px) {
  .footer .small{
    font-size: calc(12vw / 1280 * 100);
    margin: 0 calc(28vw / 1280 * 100);
    padding: calc(15vw / 1280 * 100) 0 calc(64vw / 1280 * 100);
  }
}
@media all and (max-width: 767px) {
  .footer .small{
    padding: calc(12vw / 375 * 100) 0 calc(24vw / 375 * 100);
    margin: 0 calc(19vw / 375 * 100);
    font-size: calc(10vw / 375 * 100);
  }
}
.footer .small ul{
  display: flex;
  justify-content: space-between;
  width: 71px;
}
.footer .small li{
  width: 15px;
}
.footer .small li img{
  width: 100%;
}
@media all and (max-width: 767px) {
  .footer .small ul{
    display: flex;
    justify-content: space-between;
    width: 65px;
  }
  .footer .small li{
    width: 14px;
  }
}

.page-index .menu{
  height: auto;
}
.page-index .menu .inner .bg-black{
  display: none;
}
.menu .accordion,
.menu .accordion + ul { display: none; }
@media all and (max-width: 767px) {
  .menu_btn {
    width: calc(52vw / 800 * 100);
    height: calc(52vw / 800 * 100);
    -webkit-background-size: calc(52vw / 800 * 100) calc(35vw / 800 * 100);
    -moz-background-size: calc(52vw / 800 * 100) calc(35vw / 800 * 100);
    -o-background-size: calc(52vw / 800 * 100) calc(35vw / 800 * 100);
    background-size: calc(52vw / 800 * 100) calc(35vw / 800 * 100);
  }
  .menu_btn::after {
    width: calc(52vw / 800 * 100);
    height: calc(52vw / 800 * 100);
    -webkit-background-size: calc(40vw / 800 * 100);
    -moz-background-size: calc(40vw / 800 * 100);
    -o-background-size: calc(40vw / 800 * 100);
    background-size: calc(40vw / 800 * 100);
  }
  .menu_btn_wrapper {
    height: auto;
  }
  .global_navi li:nth-child(4) a {
    margin-bottom: calc(80vw / 800 * 100);
  }
}

/* notfound */
.notfound {
  min-height: calc(100vh - 30px - 14px - 50px - 1px);
  text-align: center;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}
@media all and (max-width: 1280px) {
  .notfound { min-height: calc(100vh - 30vw / 1280 * 100 - 14vw / 1280 * 100 - 50vw / 1280 * 100 - 1px); }
}
@media all and (max-width: 767px) {
  .notfound {
    min-height: calc(100vh - 48vw / 800 * 100 - 48vw / 800 * 100 - 22vw / 800 * 100 - 2vw / 800 * 100);
  }
}

/* article-paging */
.c-paging{
  margin: 88px 28px 0;
  position: relative;
  border-top: solid 1px #fff;
  padding-top: 15px;
}
@media all and (max-width: 1280px) {
  .c-paging{
    margin: calc(88vw / 1280 * 100) calc(28vw / 1280 * 100) 0;
    letter-spacing: calc(.25vw / 1280 * 100);
    line-height: calc(30vw / 1280 * 100);
    padding-top: calc(15vw / 1280 * 100);
  }
}
@media all and (max-width: 767px) {
  .c-paging{
    margin: calc(32vw / 375 * 100) calc(19vw / 375 * 100) 0;
    line-height: 1;
    padding-top: 0;
  }
}

.c-paging a{
  color: #fff;
}
.c-paging a:hover{
  text-decoration: underline;
}

.c-paging__back {
  letter-spacing: .25px;
  text-align: center;
  line-height: 1;
}
@media all and (max-width: 767px) {
  .c-paging__back {
    text-align: left;
    padding: calc(12vw / 375 * 100) calc(20vw / 375 * 100) 0;
  }
}

.c-paging__next,
.c-paging__prev{
  position: absolute;
  padding: 15px 25px 0;
  top: 0;
  line-height: 1;
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-paging__next.en,
.c-paging__prev.en{
  line-height: 1.1;
}
.c-paging__next{
  left: 0;
}
.c-paging__prev{
  right: 0;
  text-align: right;
}
@media all and (max-width: 1280px) {
  .c-paging__next,
  .c-paging__prev{
    width: calc(200vw / 1280 * 100);
    padding: calc(15vw / 1280 * 100) calc(25vw / 1280 * 100) 0;
  }
}
@media all and (max-width: 767px) {
  .c-paging__next,
  .c-paging__prev{
    position: relative;
    left: 0;
    right: auto;
    text-align: left;
    padding: calc(12vw / 375 * 100) calc(20vw / 375 * 100) 0;
    width: auto;
  }
}

.c-paging__next::after,
.c-paging__prev::after{
  content: "";
  width: 15px;
  height: 15px;
  background-image: url(img/arrow.png);
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
  left: 0;
  top: 14px;
}
@media all and (max-width: 1280px) {
  .c-paging__next::after,
  .c-paging__prev::after{
    width: calc(15vw / 1280 * 100);
    height: calc(15vw / 1280 * 100);
    top: calc(14vw / 1280 * 100);
  }
}
.c-paging__prev::after{
  left: auto;
  right: 0;
  transform: scale(-1,1);
}
@media all and (max-width: 767px) {
  .c-paging__next::after,
  .c-paging__prev::after{
    width: calc(14vw / 375 * 100);
    height: calc(14vw / 375 * 100);
    top: auto;
    bottom: 0;
  }
  .c-paging__prev::after{
    left: 0;
    right: auto;
  }
}

/* tab list */
.c-tab_list {
  display: -webkit-flex;
  display: flex;
  letter-spacing: .25px;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  padding-top: 1px;/* border-bottomの影響でヘッダーにかぶるのを防ぐ */
  margin: 0 28px;
}
@media all and (max-width: 1280px) {
  .c-tab_list {
    letter-spacing: calc(.25vw / 1280 * 100);
    padding-top: calc(1vw / 1280 * 100);
    margin: 0 calc(28vw / 1280 * 100);
  }
}
@media all and (max-width: 767px) {
  .c-tab_list {
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    margin-left: calc(19vw / 375 * 100);
    margin-top: calc(24vw / 375 * 100);
    margin-bottom: calc(26.5vw / 375 * 100);
    padding-top: 0;
  }
  .slider-wrap{
    width: 100vw;
    overflow:hidden;
  }
  .list-wrap{
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  }
  .c-tab_list.project{
    margin-top: calc(19vw / 375 * 100);
  }
}

.c-tab_list li:not(:last-child) { padding-right: 16px; }
@media all and (max-width: 1280px) {
  .c-tab_list li:not(:last-child) { padding-right: calc(16vw / 1280 * 100); }
}
@media all and (max-width: 767px) {
  .c-tab_list li:not(:last-child) {
    padding-left: calc(19vw / 375 * 100);
    padding-right: 0;
  }
  .c-tab_list li:first-child {
    padding-left: 0;
  }
  .c-tab_list li:last-child {
    padding-left: calc(19vw / 375 * 100);
    padding-right: calc(19vw / 375 * 100);
  }
}
.c-tab_list a{
  line-height: 1;
  color:#7F7F7F;
}
@media all and (max-width: 767px) {
  .c-tab_list a{
    font-size: calc(16vw / 375 * 100);
    white-space: nowrap;
    letter-spacing: -.008em;
  }
}
.c-tab_list a.view,
.c-tab_list a:hover{
  padding-bottom: 1px;
  border-bottom: 1px solid #000;
  color:#000000;
}
@media all and (max-width: 767px) {
  .c-tab_list a:hover{
    padding-bottom: 0;
    border-bottom: 0;
  }
  .c-tab_list a.view{
    padding-bottom: calc(3vw / 375 * 100);
    border-bottom: 1px solid #000;
  }
  .c-tab_list:not(.about) a:not(.view){
    opacity: .5;
  }
}

.c-tab_hopkins {color: #1e88e5;}


.bg-black{
  background-color: #000;
  padding-top: 32px;
  flex: 1;
}
@media all and (max-width: 767px) {
  .bg-black{
    padding-top: calc(36vw / 375 * 100);
  }
}