@charset "utf-8";

/* ==================== reset.css ==================== */
/* CSS Document */
/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/
a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,body,caption,canvas,center,cite,code,dd,del,details,dfn,dialog,div,dl,dt,em,embed,fieldset,figcaption,figure,form,footer,header,hgroup,h1,h2,h3,h4,h5,h6,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,main,small,span,strike,strong,sub,summary,sup,tt,table,tbody,tfoot,thead,time,tr,th,td,u,ul,var,video{font-family:inherit;font-size:100%;font-weight:inherit;font-style:inherit;vertical-align:baseline;white-space:normal;margin:0;padding:0;border:0;outline:0;background:transparent;line-height:1;text-align:left;box-sizing: border-box;}textarea{font-family:inherit;font-size:100%;font-weight:inherit;font-style:inherit;vertical-align:baseline;margin:0;padding:0;border:0;outline:0;background:transparent;line-height:1.6;text-align:left;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main{display:block}ol,ul{list-style:none}blockquote,q{quotes:none}table{border-collapse:collapse;border-spacing:0}img{vertical-align: bottom;margin: 0;padding: 0;width: 100%;height: auto;}
blockquote, q {
	quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}
.clearfix:after {
	content: "";
	clear: both;
	display: block;
}
*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
/*　IE(edge,11)用*/
.object-fit-img {
	object-fit: cover;
	object-position: center;
	font-family: 'object-fit: cover; object-position: center;'
}
table {width: 100%;}
img {max-width: 100%;}

/* ==================== style.css（共通） ==================== */
/* CSS Document -----------------------------

 2025.06.30

--------------------------------------------*/
/*============================================
  共通パーツ
=============================================*/
:root {
  --size180: clamp(100px, calc(100px + 80 * ((100vw - 375px) / 1545)), 180px);
  --size170: clamp(70px, calc(70px + 100 * ((100vw - 375px) / 1545)), 170px);
  --size150: clamp(70px, calc(70px + 80 * ((100vw - 375px) / 1545)), 150px);
  --size130: clamp(50px, calc(50px + 80 * ((100vw - 375px) / 1545)), 130px);
  --size100: clamp(50px, calc(50px + 50 * ((100vw - 375px) / 1545)), 100px);
  --size20-100: clamp(20px, calc(20px + 80 * ((100vw - 375px) / 1545)), 100px);
  --size90: clamp(50px, calc(50px + 40 * ((100vw - 375px) / 1545)), 90px);
  --size80: clamp(50px, calc(50px + 30 * ((100vw - 375px) / 1545)), 80px);
  --size20-80: clamp(20px, calc(20px + 60 * ((100vw - 375px) / 1545)), 80px);
  --size70: clamp(40px, calc(40px + 30 * ((100vw - 375px) / 1545)), 70px);
  --size20-70: clamp(20px, calc(20px + 50 * ((100vw - 375px) / 1545)), 70px);
  --size60: clamp(40px, calc(40px + 20 * ((100vw - 375px) / 1545)), 60px);
  --size20-60: clamp(20px, calc(20px + 40 * ((100vw - 375px) / 1545)), 60px);
  --size50: clamp(40px, calc(40px + 10 * ((100vw - 375px) / 1545)), 50px);
  --size20-50: clamp(20px, calc(20px + 30 * ((100vw - 375px) / 1545)), 50px);
  --size40: clamp(30px, calc(30px + 10 * ((100vw - 375px) / 1545)), 40px);
  --size20-40: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);
  --size30: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
  --size20: clamp(10px, calc(10px + 10 * ((100vw - 375px) / 1545)), 20px);
  --size15: clamp(10px, calc(10px + 5 * ((100vw - 375px) / 1545)), 15px);

  --font40: clamp(30px, calc(30px + 10 * ((100vw - 375px) / 1545)), 40px);
  --font36: clamp(20px, calc(20px + 16 * ((100vw - 375px) / 1545)), 36px);
  --font32: clamp(20px, calc(20px + 12 * ((100vw - 375px) / 1545)), 32px);
  --font30: clamp(26px, calc(26px + 4 * ((100vw - 375px) / 1545)), 30px);
  --font26: clamp(20px, calc(20px + 6 * ((100vw - 375px) / 1545)), 26px);
  --font24: clamp(22px, calc(22px + 2 * ((100vw - 375px) / 1545)), 24px);
  --font22: clamp(18px, calc(18px + 4 * ((100vw - 375px) / 1545)), 22px);
  --font20: clamp(16px, calc(16px + 4 * ((100vw - 375px) / 1545)), 20px);
  --font16: clamp(13px, calc(13px + 3 * ((100vw - 375px) / 1545)), 16px);
  --font15: clamp(13px, calc(13px + 2 * ((100vw - 375px) / 1545)), 15px);
  --font14: clamp(12px, calc(12px + 2 * ((100vw - 375px) / 1545)), 14px);
  --font12: clamp(10px, calc(10px + 2 * ((100vw - 375px) / 1545)), 12px);

  --blue: #003F97;

  --color-text: #222;
  --font-w: 400;
  --font-jp: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "BIZ UDPGothic", Meiryo, sans-serif;
  --font: clamp(14px, calc(14px + 4 * ((100vw - 375px) / 1545)), 18px);
  --line-height: 1.7;
  --spacing-base: .018em;
}
.ZenOldMinchoR {font-family: "Zen Old Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;font-weight: 400;font-style: normal;}
.ZenOldMinchoBK {font-family: "Zen Old Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;font-weight: 900;font-style: normal;}
.TimesNewRomanR {font-family: "times-new-roman", sans-serif;font-weight: 400;font-style: normal;}
.blank {padding-top: var(--size100);}
.blank2 {padding: var(--size100) 0;}
/* ----------------------------------------------

 * タグの設定

---------------------------------------------- */
a {
  display: inline-block;
  outline: none;
  color: var(--color-text);
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: .3s ease;
  user-select: none;
}
a.link {position: absolute;top: 0;left: 0;z-index: 2;width: 100%;height: 100%;}
input,
input[type="submit"],
input[type="button"],
button {
  border-radius: 0;
  appearance: button;
  box-sizing: border-box;
  outline: none;
  color: var(--color-text);
  font-style: normal;
  font-weight: var(--font-w);
  font-family: var(--font-jp);
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {display: none;}
input[type="button"],
input[type="text"],
input[type="submit"],
input[type="image"],
input[type="tel"],
input[type="email"],
textarea {appearance: none;border-radius: 0;color: var(--color-text);}
select {font-family: var(--font-jp);appearance: none;}
/*------------------------------------------------*/
html {
  margin: 0;
  padding: 0;
  background: #fff;
  color: var(--color-text);
  font-style: normal;
  font-weight: var(--font-w);
  font-size: 62.5%;
  line-height: var(--line-height);
  font-family: var(--font-jp);
  -webkit-font-smoodting: antialiased;
  -moz-osx-font-smoodting: grayscale;
  word-break: break-all;
}
body {overflow-x: hidden;font-size: var(--font);line-height: var(--line-height);}
h3,h4,h5 {line-height: 1.4;}
p {font-size: var(--font);line-height: var(--line-height);}
li,th,td,dt,dd,figcaption {line-height: var(--line-height);}
section {position: relative;z-index: 1;overflow: hidden;}
.inner {width: 90%;max-width: 1344px;margin: 0 auto;}
.flexbox {display: flex;flex-wrap: wrap;justify-content: space-between;}
/* title common */
.title_common {position: relative;margin-bottom: var(--size50);}
.title_common h2 {color: #8E754B;font-size: var(--font36);text-align: center;}
.title_common h2 span {display: inline-block;position: relative;line-height: 1.4;text-align: center;}
.title_common h2 span::before,
.title_common h2 span::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--size180);
  height: 100%;
  background: url(img/common/img_frame01.svg) no-repeat center / 100%;
}
.title_common h2 span::before {right: 105%;}
.title_common h2 span::after {left: 105%;}
/* title common2 */
.title_common2 {position: relative;margin-bottom: var(--size80);padding: var(--size70) 0;background: var(--blue);}
.title_common2::before,
.title_common2::after {content: '';position: absolute;left: 0;width: 100%;height: 3px;background: #AE957C;}
.title_common2::before {top: var(--size20);}
.title_common2::after {bottom: var(--size20);}
.title_common2 h2 {color: #F2DD99;font-size: var(--font36);text-align: center;}
.title_common2 h2 span {display: inline-block;position: relative;line-height: 1.4;text-align: center;}
.title_common2 h2 span::before,
.title_common2 h2 span::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--size180);
  height: 100%;
  background: url(img/common/img_frame02.svg) no-repeat center / 100%;
}
.title_common2 h2 span::before {right: 110%;}
.title_common2 h2 span::after {left: 110%;}
a[href^="tel:"] {pointer-events: none;}
.pc,.pc2,.pc3 {display: block;}
.sp,.sp2,.sp3 {display: none;}
@media only screen and ( max-width : 1024px ) {
  .pc3 {display: none;}
  .sp3 {display: block;}
}
@media only screen and ( max-width : 767px ) {
  a[href^="tel:"] {pointer-events: visible;}
  .pc {display: none;}
  .sp {display: block;}
}
@media only screen and ( max-width : 500px ) {
  .pc2 {display: none;}
  .sp2 {display: block;}
}
/*--------------------------------------------------

    header

--------------------------------------------------*/
header {
  display: flex;
  align-items: center;
  position: fixed;
  top: 10px;
  right: 10px;
  left: 10px;
  z-index: 9;
  max-width: 1536px;
  margin: 0 auto;
  padding-left: var(--size20-40);
  border-radius: 40px;
  background: #fff;
  transition: .3s;
}
header.current {box-shadow: 0 3px 6px rgba(0, 0, 0, 16%);}
header .logo {width: clamp(147px, calc(147px + 100 * ((100vw - 375px) / 1545)), 247px);}
header nav {display: flex;align-items: center;justify-content: flex-end;position: relative;width: 100%;}
header nav ul {display: flex;gap: var(--size20-50);position: absolute;top: 50%;left: 40%;transform: translate(-50%, -50%);}
header nav ul li a {position: relative;color: var(--blue);letter-spacing: .1em;text-align: center;}
header nav ul li a::after {content: '';position: absolute;bottom: -8px;left: 50%;transform: translateX(-50%);width: 0;height: 1px;background: var(--blue);transition: .3s;}
header nav ul li a.link-current::after {width: 30%;}
header nav a.entry {
  position: relative;
  padding: var(--size30) var(--size60) var(--size30) var(--size130);
  overflow: hidden;
  border-radius: 40px;
  background: linear-gradient(90deg, #00B8EE, #003F97);
  color: #fff;
  font-size: var(--font24);
  text-align: center;
}
header nav a.entry::before {
  content: '';
  position: absolute;
  top: 50%;
  left: var(--size20);
  transform: translateY(-50%);
  width: 15%;
  height: 100%;
  background: url(img/common/Icon_anchor.svg) no-repeat center left / 100%;
}
#sp-menu {display: none;}
@media only screen and ( max-width : 1400px ) {
  header nav ul li a {font-size: 1.15vw;}
}
@media only screen and ( max-width : 1024px ) {
  #js-black-bg {
    display: block;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    overflow: hidden;
    visibility: hidden;
    background: var(--blue);
    transition: opacity 0.4s, visibility 0.4s;
    cursor: pointer;
    user-select: none;
  }
  #js-black-bg.clicked {opacity: .5;visibility: visible;}
  header {padding: 10px 20px;}
  header.Scroll {box-shadow: 0 0 10px rgba(0, 63, 151, .35);}
  header nav {
    display: block;
    position: absolute;
    top: 120%;
    right: -100%;
    z-index: 10;
    width: 70%;
    max-width: 400px;
    padding: 30px 20px 20px;
    border-radius: 10px;
    background: #fff;
    text-align: center;
    transition: all .3s linear;
  }
  header nav.clicked {right: 20px;}
  header nav ul {display: block;position: initial;transform: none;margin-bottom: 20px;}
  header nav ul li {width: 100%;margin: 0;border-bottom: 1px solid #D9D9D9;}
  header nav.clicked ul li {opacity: 0;animation: fadeRigth .3s ease forwards;}
  @keyframes fadeRigth {
    from {
      opacity: 0;
      -webkit-transform: translate3d(50px, 0, 0);
      transform: translate3d(50px, 0, 0);
    }
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  header nav.clicked ul li:nth-of-type(1) {animation-delay: .35s;}
  header nav.clicked ul li:nth-of-type(2) {animation-delay: .4s;}
  header nav.clicked ul li:nth-of-type(3) {animation-delay: .45s;}
  header nav.clicked ul li:nth-of-type(4) {animation-delay: .5s;}
  header nav.clicked ul li:nth-of-type(5) {animation-delay: .55s;}
  header nav.clicked ul li:nth-of-type(6) {animation-delay: .6s;}
  header nav ul li a {display: block;width: 100%;padding: 15px 0;font-size: 1.6rem;}
  header nav ul li a::after {display: none;}
  header nav a.entry {display: block;width: 100%;padding: 20px 20px 20px 60px;white-space: nowrap;}
  header nav a.entry::before {left: 20px;width: 28px;}
  header nav.clicked a.entry {opacity: 0;animation: fadeRigth .3s ease forwards;animation-delay: .6s;}
  #sp-menu {display: flex;justify-content: center;align-items: center;position: absolute;top: 50%;right: 20px;transform: translateY(-50%);z-index: 20;width: 40px;height: 40px;border-radius: 5px;cursor: pointer;}
  #sp-menu a {display: block;position: relative;width: 40%;height: 14px;}
  #sp-menu span {display: inline-block;position: absolute;left: 0;z-index: 2;width: 100%;height: 2px;background: var(--blue);transition: all .4s;}
  #sp-menu span:nth-child(1) {top: 0;}
  #sp-menu span:nth-child(2) {top: 6px;}
  #sp-menu span:nth-child(3) {bottom: 0;}
  #sp-menu span:nth-child(2)::after {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 2px;background: var(--blue);transition: all .4s;}
  #sp-menu.clicked span:nth-child(2) {transform: rotate(-45deg);}
  #sp-menu.clicked span:nth-child(2)::after {transform: rotate(90deg);}
  #sp-menu.clicked span:nth-child(1) {transform: translateY(20px) scale(0);}
  #sp-menu.clicked span:nth-child(3) {transform: translateY(-20px) scale(0);}
}
@media only screen and ( min-width : 1024px ) {
    #js-black-bg {display: none;}
}
/*--------------------------------------------------

    footer

--------------------------------------------------*/
footer {padding: 30px 0;background: var(--blue);}
footer small {display: block;color: #fff;font-size: var(--font12);text-align: center;}
/*--------------------------------------------------

　   back top

--------------------------------------------------*/
.wrapper {position: relative;}
.page_top {
  display: block;
  position: fixed;
  bottom: 5%;
  right: 2%;
  z-index: 10;
  font-size: var(--font16);
  letter-spacing: .14em;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
.page_top #goToTop {color: #AE957C;}
.page_top #goToTop:after {
  content: '';
  display: block;
  position: absolute;
  top: -55px;
  left: 50%;
  transform: translateX(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #AE957C;	
  transition: .3s ease all;
}
.page_top #goToTop:before {
  content: '';
  display: block;
  position: absolute;
  top: -44px;
  left: 49.5%;
  width: 1px;
  height: 38px;
  background: #AE957C;
  transition: 0.3s ease all;
}
.page_top #goToTop:hover:after {top: -60px;}
.page_top #goToTop:hover:before {height: 43px;top: -50px;}

/* ==================== top.css ==================== */
/*-------------------------------------------------

	Main Visual

--------------------------------------------------*/
#mv {position: relative;z-index: 2;}
#mv::before {content: '';position: absolute;top: 0;left: 0;z-index: 0;width: 100%;height: 100%;background: rgba(87, 143, 255, 20%);}
#mv .wrap {position: absolute;bottom: 22%;left: 10%;z-index: 2;max-width: 1536px;margin: 0 auto;}
#mv .wrap h1 {margin-bottom: 2%;color: #fff;font-size: 4.3vw;line-height: 1.3;}
#mv .wrap p {color: #fff;font-size: 1.2vw;letter-spacing: .1em;}
#mv .wrap p span {position: relative;margin-left: 5vw;padding: .1em .5em;border: 1px solid #fff;}
#mv .wrap p span::before {content: '';position: absolute;top: 50%;right: 110%;transform: translateY(-50%);width: 3vw;height: 1px;background: #fff;}
@media only screen and ( max-width : 1024px ) {
	#mv .wrap p {font-size: 1.6vw;}
}
@media only screen and ( max-width : 767px ) {
	#mv figure {aspect-ratio: 6 / 7;overflow: hidden;}
	#mv figure picture {display: block;height: 100%;}
	#mv figure img {width: 100%;height: 100%;object-fit: cover;}
	#mv .wrap h1 {font-size: 8vw;}
	#mv .wrap p {font-size: 3.2vw;}
	#mv .wrap p span {display: table;margin: 8px 0 0;}
	#mv .wrap p span::before {display: none;}
}
/*--------------------------------------------------

	MESSAGE │ メッセージ

--------------------------------------------------*/
#message {position: relative;padding: var(--size100) 0 30%;background: url(img/front/message/bg.webp) no-repeat top center / cover;}
#message::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: clamp(220px, 32vw, 460px);
	background: url(img/front/message/img_illust.webp) no-repeat bottom center / 100%;
}
#message .inner {max-width: 1152px;}
#message .message_container {padding: var(--size20-60) var(--size20-100);background: #fff;}
#message .message_container ul {align-items: center;gap: var(--size100);}
#message .message_container ul li:nth-child(1) {color: var(--blue);font-size: var(--font30);line-height: 2;}
#message .message_container ul li:nth-child(2) {flex: 1;}
#message .message_container ul li .content p {font-size: var(--font18);line-height: 2;}
#message .message_container ul li .content p .strong {font-weight: 700;}
@media only screen and ( max-width : 767px ) {
	#message {padding-bottom: 40%;}
	#message::before {background-size: 125%;}
	#message .message_container {padding: 20px;}
	#message .message_container ul {gap: 20px;}
	#message .message_container ul li:nth-child(1) {width: 100%;font-size: 5vw;line-height: 1.7;}
	#message .message_container ul li:nth-child(2) {width: 100%;}
}
@media only screen and ( max-width : 500px ) {
	#message .message_container ul li:nth-child(1) {font-size: 8vw;}
}
/*--------------------------------------------------

	ACTIVITY │ 活躍するフィールド

--------------------------------------------------*/
#activity {padding: 30px 0 var(--size100);overflow: hidden;background: var(--blue);}
#activity::before {content: '';position: absolute;bottom: 0;left: 0;z-index: -1;width: 100%;height: 100%;background: url(img/front/activity/img_wave.webp) no-repeat bottom center / 130%;}
#activity .title_common h2 {color: #F2DD99;}
#activity .title_common h2 span::before,
#activity .title_common h2 span::after {background-image: url(img/common/img_frame02.svg);}
#activity .container {width: 85vw;margin: 0 auto;}
#activity .container figure.ship {width: 92.5vw;margin: -11.5% calc(50% - 50vw) 3%;}
#activity .container figure.blueprint {margin-bottom: 5%;}
#activity .container ul {align-items: flex-start;gap: clamp(30px, 5vw, 60px) 0;width: 87%;margin: 0 auto;}
#activity .container ul li {position: relative;width: 45%;}
#activity .container ul:nth-child(2) li:nth-child(1) {width: 34%;margin-left: 9%;padding-top: 7%;}
#activity .container ul:nth-child(2) li::before,
#activity .container ul:nth-child(2) li::after {content: '';position: absolute;top: 4vw;background: #fff;}
#activity .container ul:nth-child(2) li:nth-child(1)::before {left: 0;width: 99%;height: .25vw;}
#activity .container ul:nth-child(2) li:nth-child(1)::after {left: 0;width: .3vw;height: 20.5vw;}
#activity .container ul:nth-child(2) li:nth-child(2)::before {right: 100%;width: 5.5vw;height: .25vw;}
#activity .container ul:nth-child(2) li:nth-child(2)::after {right: 116%;width: .3vw;height: 20.5vw;}
#activity .container ul:last-child li::before {
	content: '';
	position: absolute;
	bottom: 100%;
	left: 49%;
	transform: translateX(-50%);
	width: .3vw;
	height: 5.5vw;
	background: #fff;
}
#activity .container ul:last-child li:nth-child(2)::before {left: 46.5%;height: 9.8vw;}
#activity .container ul li figure {margin-bottom: 3%;}
#activity .container ul li .content {width: 93%;margin: 0 auto;}
#activity .container ul:nth-child(2) li:nth-child(1) .content {margin: 0 0 0 auto;}
#activity .container ul li .content h3 {margin-bottom: 2%;color: #fff;font-size: 1.6vw;}
#activity .container ul li .content p {color: #fff;font-size: .95vw;}
@media only screen and ( max-width : 1024px ) {
	#activity .container {width: 90%;}
	#activity .container figure.ship {margin-top: 0;}
	#activity .container figure.blueprint {width: 99vw;margin: 50px calc(50% - 50vw) 30px;}
	#activity .container ul {width: 100%;}
	#activity .container ul li {width: 100%;}
	#activity .container ul:nth-child(2) li:nth-child(1) {width: 100%;margin: 0 0 30px;padding: 0;}
	#activity .container ul:last-child li:nth-child(2) {width: 100%;}
	#activity .container ul li::before {display: none;}
	#activity .container ul li::after {display: none;}
	#activity .container ul li figure {margin-bottom: 10px;}
	#activity .container ul li .content {width: 98%;}
	#activity .container ul:nth-child(2) li:nth-child(1) .content {margin: 0 auto;}
	#activity .container ul li .content h3 {display: flex;align-items: center;gap: 10px;font-size: var(--font30);}
	#activity .container ul li .content p {font-size: var(--font16);}
}
/*--------------------------------------------------

	WORK STYLE │ シーライン東京シッピングの働き方

--------------------------------------------------*/
#work_style .compare_table {margin-bottom: var(--size50);}
#work_style .compare_table table tbody {display: inline-table;width: 100%;}
#work_style .compare_table table tr:nth-child(1) {border-bottom: 1px solid var(--blue);}
#work_style .compare_table table tr:nth-child(odd) {background: #fff;}
#work_style .compare_table table tr:nth-child(even) {background: #F2F6F9;}
#work_style .compare_table table tr th {padding-bottom: 9px;border: none;font-size: var(--font24);text-align: center;}
#work_style .compare_table table tr td {padding: 10px 0;text-align: center;}
#work_style .compare_table table tr td:nth-child(1) {width: 40%;}
#work_style .compare_table table tr td:nth-child(3) {width: 40%;}
#work_style .compare_table table tr td.is-blue,
#work_style .compare_table table tr th.is-blue {color: var(--blue);}
#work_style .compare_table table tr td:nth-child(2) {font-weight: 700;}
#work_style ul.voice_list {margin-bottom: var(--size100);}
#work_style ul.voice_list li {align-items: center;margin-bottom: var(--size50);}
#work_style ul.voice_list li:nth-child(even) {flex-direction: row-reverse;}
#work_style ul.voice_list li:last-child {margin-bottom: 0;}
#work_style ul.voice_list li figure {width: 45%;}
#work_style ul.voice_list li .wrap {width: 50%;}
#work_style ul.voice_list li .wrap h3 {margin-bottom: var(--size20);color: var(--blue);font-size: var(--font24);}
#work_style .photo_strip {overflow: hidden;width: 100vw;margin-left: calc(50% - 50vw);}
#work_style .photo_strip ul {display: flex;flex-shrink: 0;gap: var(--size20);width: max-content;animation: photo_strip_scroll 50s linear infinite;}
#work_style .photo_strip li {flex-shrink: 0;width: calc((100vw - var(--size20) * 4) / 4.5);aspect-ratio: 4 / 3;overflow: hidden;}
#work_style .photo_strip li img {width: 100%;height: 100%;object-fit: cover;}
@keyframes photo_strip_scroll {
	0% {transform: translateX(0);}
	100% {transform: translateX(-50%);}
}
@media only screen and ( max-width : 767px ) {
	#work_style .compare_table .container .wrap:nth-child(1) {margin-bottom: 30px;}
	#work_style .compare_table .container .wrap h3 {margin-bottom: 15px;font-size: var(--font24);text-align: center;}
	#work_style .compare_table .container .wrap:nth-child(2) h3 {color: var(--blue);}
	#work_style .compare_table .container .wrap table {max-width: 500px;margin: 0 auto;}
	#work_style .compare_table .container .wrap table tr:nth-child(1) {border-top: 1px solid var(--blue);border-bottom: none;}
	#work_style .compare_table .container .wrap table tr:nth-child(odd) {background: #F2F6F9;}
	#work_style .compare_table .container .wrap table tr:nth-child(even) {background: #fff;}
	#work_style .compare_table .container .wrap table tr th {
		width: clamp(130px, calc(130px + 50 * ((100vw - 375px) / 1545)), 180px);
		padding-right: var(--size30);
		font-weight: 700;
		font-size: var(--font-base);
		text-align: right;
	}
	#work_style .compare_table .container .wrap table tr td {width: auto;padding: 8px 6px;font-weight: 400;text-align: left;}
	#work_style .compare_table .container .wrap:nth-child(2) table tr td {color: var(--blue);}
	#work_style ul.voice_list li figure {width: 100%;margin-bottom: 20px;}
	#work_style ul.voice_list li .wrap {width: 100%;}
	#work_style .photo_strip li {width: calc((100vw - var(--size20)) / 1.8);}
}
/*--------------------------------------------------

	NUMBERS │ 数字で見るシーライン東京シッピング

--------------------------------------------------*/
#numbers ul {display: grid;grid-template-columns: repeat(4, 1fr);gap: 20px;}
#numbers ul li {display: flex;flex-direction: column;justify-content: space-between;padding: var(--size30) var(--size20);border-radius: var(--size20);background: #D4ECFF;}
#numbers ul li h3 {margin-bottom: 5px;overflow: hidden;color: var(--blue);font-size: var(--font24);text-align: center;}
#numbers ul li h3 span {position: relative;}
#numbers ul li h3 span::before,
#numbers ul li h3 span::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3em;
  height: 100%;
  background: url(img/front/numbers/img_frame.svg) no-repeat center / 100%;
}
#numbers ul li h3 span::before {right: 110%;}
#numbers ul li h3 span::after {left: 110%;}
#numbers ul li figure {width: 90%;margin: 0 auto;}
#numbers ul li:nth-child(1) figure {width: 100%;}
@media only screen and ( max-width : 1024px ) {
	#numbers ul {grid-template-columns: repeat(2, 1fr);}
}
@media only screen and ( max-width : 500px ) {
	#numbers ul {grid-template-columns: 1fr;}
	#numbers ul li {padding: var(--size30) var(--size50);}
	#numbers ul li h3 {margin-bottom: 20px;}
}
/*--------------------------------------------------

	INTERVIEW │ インタビュー

--------------------------------------------------*/
#interview .inner {max-width: 1180px;}
#interview ul {display: grid;grid-template-columns: repeat(4, 1fr);gap: 20px;}
#interview ul li {position: relative;padding: 10px 10px 20px;border: 1px solid #707070;background: #fff;}
#interview ul li figure {margin-bottom: 20px;}
#interview ul li .wrap {padding: 0 10px;}
#interview ul li .wrap .content p {font-size: var(--font16);letter-spacing: .1em;}
#interview ul li .wrap .content dl dt {margin-bottom: 8px;font-size: var(--font40);line-height: 1.4;letter-spacing: .1em;}
#interview ul li .wrap .content dl dd {font-size: var(--font14);letter-spacing: .1em;}
#interview ul li .wrap .arrow {position: relative;width: 30px;height: 30px;margin-left: auto;border: 1px solid #333;border-radius: 50%;}
#interview ul li .wrap .arrow span {position: absolute;top: 60%;left: 0;transform: translate(-50%, -50%);width: 20px;height: 1px;border-bottom: 1px solid #333;transition: .3s;}
#interview ul li:hover .wrap .arrow span {left: 40%;}
#interview ul li .wrap .arrow span::after {content: '';position: absolute;right: 3px;bottom: -2px;transform: rotate(-45deg);width: 1px;height: 8px;border-right: 1px solid #333;}
@media only screen and ( max-width : 1024px ) {
	#interview ul {grid-template-columns: repeat(2, 1fr);}
	#interview ul li {display: flex;align-items: center;gap: 30px;padding-bottom: 10px;}
	#interview ul li figure {width: 40%;margin-bottom: 0;}
	#interview ul li .wrap {width: 60%;padding: 0;}
	#interview ul li .wrap .arrow {right: 10px;bottom: 10px;}
}
@media only screen and ( max-width : 500px ) {
	#interview ul {grid-template-columns: 1fr;}
}
/*--------------------------------------------------

	JOB INFO │ 募集要項

--------------------------------------------------*/
#job_info .inner {max-width: 1040px;}
#job_info table tr {display: block;padding: var(--size20) 5px;border-bottom: 1px solid #BBB;}
#job_info table tr:first-child {padding-top: 0;}
#job_info table tr:last-child {padding-bottom: 0;border-bottom: none;}
#job_info table tr th {width: 205px;font-weight: 700;font-size: var(--font16);letter-spacing: .1em;}
#job_info table tr td {font-size: var(--font16);letter-spacing: .1em;}
#job_info table tr td .wrap {margin-bottom: var(--size30);}
#job_info table tr td .wrap:last-child {margin-bottom: 0;}
#job_info table tr td p {font-size: var(--font16);}
#job_info table tr td ul.square li {position: relative;padding-left: 16px;}
#job_info table tr td ul.square li::before {content: '';position: absolute;top: calc(.8em - 6.5px);left: 0;width: 13px;height: 13px;background: #333;}
#job_info table tr td ul.star li {position: relative;padding-left: 18px;}
#job_info table tr td ul.star li::before {content: '★';position: absolute;left: 0;}
#job_info table tr td ul.double li {position: relative;padding-left: 18px;}
#job_info table tr td ul.double li::before {content: '◎';position: absolute;left: 0;}
#job_info table tr td ul.dia {margin-left: 5px;}
#job_info table tr td ul.dia li {position: relative;padding-left: 15px;}
#job_info table tr td ul.dia li::before {content: '';position: absolute;top: calc(.8em - 5px);left: 0;transform: rotate(45deg);width: 10px;height: 10px;background: #333;}
@media only screen and ( max-width : 767px ) {
	#job_info table {width: 100%;}
	#job_info table tr th {display: block;width: 100%;margin-bottom: 5px;}
	#job_info table tr td {display: block;}
}

/* ==================== custom_animation.css ==================== */
/* CSS Document */
/*------------------------------------------------

    fade animation

------------------------------------------------*/
/* fade */
.fade {opacity: 0;}
.fade.isActive {
	animation: fadeAnime 1s forwards ease-out;
	animation-delay: .2s;
}
@keyframes fadeAnime {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
/* .fade {
	opacity: 0;
	transition: opacity 1s,transform .7s;
}
.fade.isActive {opacity:1;} */
/* 右からスライドイン */
.fadeRight {opacity: 0;}
.fadeRight.isActive {
	animation: fadeRightAnime .8s forwards ease-out;
	animation-delay: .1s;
}
@keyframes fadeRightAnime {
	0% {
		opacity: 0;
		transform: translateX(30px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
/*----- 戻りの動きがfadeout -----*/
/* .fadeRight {
	opacity: 0;
	transform: translateX(30px);
	transition: opacity 1s,transform .7s;
}
.fadeRight.isActive {
	opacity: 1;
	transform: translateX(0);
} */
/* 左からスライドイン */
.fadeLeft {opacity: 0;}
.fadeLeft.isActive {
	animation: fadeLeftAnime .8s forwards ease-out;
	animation-delay: .1s;
}
@keyframes fadeLeftAnime {
	0% {
		opacity: 0;
		transform: translateX(-30px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
/*----- 戻りの動きがfadeout -----*/
/* .fadeLeft {
	opacity: 0;
	transform: translateX(-50px);
	transition: opacity 1s,transform .7s;
}
.fadeLeft.isActive {
	opacity: 1;
	transform: translateX(0);
} */
/* 下からスライドイン */
.fadeUp {opacity: 0;}
.fadeUp.isActive {
	animation: fadeUpAnime 1.2s forwards cubic-bezier(0.33, 1, 0.68, 1);
	animation-delay: .2s;
}
@keyframes fadeUpAnime {
	from {
	  opacity: 0;
	  transform: translateY(50px);
	}
	to {
	  opacity: 1;
	  transform: translateY(0);
	}
}
.fadeUp2 {opacity: 0;}
.fadeUp2.isActive {
	animation: fadeUpAnime2 1.2s forwards cubic-bezier(0.33, 1, 0.68, 1);
	animation-delay: .2s;
}
@keyframes fadeUpAnime2 {
	from {
	  opacity: 0;
	  transform: translateY(30px);
	}
	to {
	  opacity: 1;
	  transform: translateY(0);
	}
}
/*----- 戻りの動きがfadeout -----*/
/* .fadeUp {
	opacity: 0;
	transform: translateY(50px);
	transition: opacity 1s,transform .7s;
}
.fadeUp.isActive {
	opacity: 1;
	transform: translateY(0);
} */
/* 上からスライドイン */
.fadeDown {opacity: 0;}
.fadeDown.isActive {
	animation: fadeDownAnime .8s forwards ease-out;
}
@keyframes fadeDownAnime {
	from {
		opacity: 0;
		transform: translateY(-50px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
/*----- 戻りの動きがfadeout -----*/
/* .fadeDown {
	opacity: 0;
	transform: translateY(-50px);
	transition: opacity 1s,transform .7s;
}
.fadeDown.isActive {
	opacity: 1;
	transform: translateY(0);
} */
.fadeZoomOut {opacity: 0;}
.fadeZoomOut.isActive {
	animation: fadeZoomOut .8s forwards ease-out;
}
@keyframes fadeZoomOut {
	from {
		opacity: 0;
		visibility: visible;
	}
	to {
		opacity: 1;
		transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
		transition: opacity 0.6s cubic-bezier(0.5, 0, 0, 1) 0.1s, transform 0.6s cubic-bezier(0.5, 0, 0, 1) 0.1s;
	}
}
.js_trigger.delay1 {animation-delay: .4s;transition-delay: .4s;}
.js_trigger.delay2 {animation-delay: .6s;transition-delay: .6s;}
.js_trigger.delay3 {animation-delay: .8s;transition-delay: .8s;}
.js_trigger.delay4 {animation-delay: 1s;transition-delay: 1s;}
.js_trigger.delay5 {animation-delay: 1.2s;transition-delay: 1.2s;}
.js_trigger.delay6 {animation-delay: 1.4s;transition-delay: 1.4s;}
.js_trigger.delay7 {animation-delay: 1.6s;transition-delay: 1.6s;}
@media only screen and ( max-width : 1024px ) {
	.js_trigger.animated,
	.js_trigger.animated.delay1,
	.js_trigger.animated.delay2,
	.js_trigger.animated.delay3,
	.js_trigger.animated.delay4,
	.js_trigger.animated.delay5,
	.js_trigger.animated.delay6,
	.js_trigger.animated.delay7 {animation-delay: 0s;transition-delay: 0s;}
}
/*------------------------------------------------

    text animation

------------------------------------------------*/
/* 一文字ずつ出てくる */
.char_wrap .char {display: inline-block;opacity: 0;transform: translateY(20px);transition: none;}
.char_wrap.isActive .char {opacity: 1;transform: translateY(0);transition: opacity 0.4s ease-out, transform 0.4s ease-out;}
.char_wrap p {opacity: 0;transform: translateY(20px);transition: none;}
.char_wrap.isActive p {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
	transition-delay: 0.8s;
}
/* 一文字ずつ出てくる */
.eachTextAnime {opacity: 0;}
.eachTextAnime.appeartext {opacity: 1;}
.eachTextAnime span {opacity: 0;}
.eachTextAnime.appeartext span {opacity: 0;animation:text_anime_on 1s ease-out forwards;}
@keyframes text_anime_on {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
/* 一文字ずつ出てくる*/
.visual .line,
.visual .letter {opacity: 0;}
.visual .letter {display: inline-block;opacity: 0;text-align: center;}
.visual .line {opacity: 0;text-align: center;}
.visual.is-visible.isActive .line {opacity: 1;}
.visual.is-visible.isActive .letter {animation: slideIn .8s cubic-bezier(0,1.2,.13,1.5) forwards;}
@keyframes slideIn {
	0% {
		opacity: 0;
		transform: translate3d(-100px,0,0);
	}
	100% {
		opacity: 1;
		transform: translate3d(0,0,0);
	}
}
/* アニメーションで傾斜がついている文字列を水平に戻す　*/
.move_txt_content {display: block;overflow: hidden;}
.move_txt_content .movetxt {
	display: block;
	transition: .8s ease-in-out;
	transform: translate3d(0,100%,0) skewY(12deg);
	transform-origin: left;
	line-height: 1.7;
}
.move_txt_content .movetxt.isActive {transform: translate3d(0,0,0) skewY(0);}
/* 滑らかに文字が出現する */
.flowing {display: block;opacity: 0;overflow: hidden;}
.flowing.isActive {
	opacity: 1;
	white-space: nowrap;
	overflow: hidden;
	animation: flowing-anim 1s forwards linear;
}
@keyframes flowing-anim {
	0% {
		opacity: 0;
		width: 0%;
	}
	100% {
		opacity: 1;
		width: 100%;
	}
}
.flowing.delay1 {animation-delay: 2s;}
/* 上下のアニメーション*/
.UpAnime {
	display: inline-block;
	opacity: 0;
	overflow: hidden;
}
.UpAnime.isActive {
	opacity: 0;
	animation-name: slideTextY100;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
}
@keyframes slideTextY100 {
	from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
.UpAnime span.isActive {
	opacity: 0;
	display: inline-block;
	animation-name: slideTextY-100;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
}
@keyframes slideTextY-100 {
	from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
/* 上下のアニメーション*/
.DownAnime {
	display: inline-block;
	opacity: 0;
	overflow: hidden;
}
.DownAnime.isActive {
	display: inline-block;
	opacity: 0;
	animation-name: DslideTextY-100;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
}
@keyframes DslideTextY-100 {
	from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
.DownAnime span {line-height: 1.4;}
.DownAnime span.isActive {
	opacity: 0;
	display: inline-block;
	animation-name: DslideTextY100;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
}
@keyframes DslideTextY100 {
	from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
/* 滑らか左から文字が出現する */
.leftAnime {
	display: inline-block;
	opacity: 0;
	overflow: hidden;
	position: relative;
}
.leftAnime.isActive {
	animation-name:slideTextX100;
	animation-duration:0.8s;
	animation-fill-mode:forwards;
	opacity: 0;
}
@keyframes slideTextX100 {
	from {
		transform: translateX(-100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}
.leftAnime span.isActive {
	opacity: 0;
	display: inline-block;
	position: relative;
	animation-name:slideTextX-100;
	animation-duration: 0.8s;
	animation-fill-mode:forwards;
}
@keyframes slideTextX-100 {
	from {
		transform: translateX(100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}
/* ボーダーが下から上へ伸びる */
.upBorder {position: relative;margin-bottom: 10px;}
.upBorder::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 0;
	background: #E1E1E1;
	transition: all 2s;
}
.upBorder.isActive::before {display: inline-block;height: 100%;}
/* 文字上のボーダーが左から右へ伸びる */
.leftBorder {position: relative;}
.leftBorder::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background: #363636;
	transition: all 1.5s;
	transition-delay: .5s;
}
.leftBorder.isActive::before {display: inline-block;width: calc(37px + 10 * ((100vw - 375px) / 1545));}
/* 文字下のボーダーが左から右へ伸びる */
.bottomBorder {position: relative;z-index: 1;}
.bottomBorder::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background: #079DD9;
	transition: all 1s;
	transition-delay: .3s;
}
.bottomBorder.isActive::before {width: 100%;}
/* 文字下のボーダーが真ん中から伸横にびる */
.centerBorder {position: relative;z-index: 1;}
.centerBorder::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0);
	width: 0;
	height: 1px;
	background: #000;
	transition: all 1s;
	transition-delay: .3s;
}
.centerBorder.isActive::before  {width: 100%;}
/* じわっと文字が出てくる */
.blur {opacity: 0;}
.blur.isActive {
	animation-name: blurAnime;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
}
@keyframes blurAnime {
	from {
		filter: blur(10px);
		transform: scale(1.02);
		opacity: 0;
	}
	to {
		filter: blur(0);
		transform: scale(1);
		opacity: 1;
	}
}
/* 背景色が伸びたあとに文字が出現する */
/*全共通*/
.bgextend {
	display: inline-block;
	animation-name:bgextendAnimeBase;
	animation-duration:1s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;
	opacity:0;
}
@keyframes bgextendAnimeBase {
	from {opacity:0;}
	to {opacity:1;}
}
/*中の要素*/
.bgappear {
	display: inline-block;
	animation-name:bgextendAnimeSecond;
	animation-duration:1s;
	animation-delay: 0.6s;
	animation-fill-mode:forwards;
	opacity: 0;
	padding: 5px 7px 5px 5px;
	background: #fff;
	line-height: 1.4;
}
@keyframes bgextendAnimeSecond {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
/*上から下*/
.bgUDextend::before {
	content: "";
	display: inline-block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #081A40;
	animation-name:bgUDextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}
@keyframes bgUDextendAnime {
	0% {
		transform-origin:top;
		transform:scaleY(0);
	}
	50% {
		transform-origin:top;
		transform:scaleY(1);
	}
	50.001% {
		transform-origin:bottom;
	}
	100% {
		transform-origin:bottom;
		transform:scaleY(0);
	}
}
.bgappearTrigger,
.bgLRextendTrigger {opacity: 0;}
/* 下から登場するアニメーション */
.updown {display: flex;overflow: hidden;}
.updown span {display: inline-block;transform: translateY(115%);}
.updown.isActive span:nth-child(1) {animation: fadeInText .7s ease 0.1s forwards;}
.updown.isActive span:nth-child(2) {animation: fadeInText .7s ease 0.2s forwards;}
.updown.isActive span:nth-child(3) {animation: fadeInText .7s ease 0.3s forwards;}
.updown.isActive span:nth-child(4) {animation: fadeInText .7s ease 0.4s forwards;}
.updown.isActive span:nth-child(5) {animation: fadeInText .7s ease 0.5s forwards;}
.updown.isActive span:nth-child(6) {animation: fadeInText .7s ease 0.6s forwards;}
.updown.isActive span:nth-child(7) {animation: fadeInText .7s ease 0.7s forwards;}
.updown.isActive span:nth-child(8) {animation: fadeInText .7s ease 0.8s forwards;}
.updown.isActive span:nth-child(9) {animation: fadeInText .7s ease 0.9s forwards;}
.updown.isActive span:nth-child(10) {animation: fadeInText .7s ease 1s forwards;}
.updown.isActive span:nth-child(11) {animation: fadeInText .7s ease 1.1s forwards;}
.updown.isActive span:nth-child(12) {animation: fadeInText .7s ease 1.2s forwards;}
.updown.isActive span:nth-child(13) {animation: fadeInText .7s ease 1.3s forwards;}
.updown.isActive span:nth-child(14) {animation: fadeInText .7s ease 1.4s forwards;}
.updown.isActive span:nth-child(15) {animation: fadeInText .7s ease 1.5s forwards;}
@keyframes fadeInText {
	100% {transform: translateY(0);}
}
/*------------------------------------------------

    画像に使える animation

------------------------------------------------*/
/* スライドイン表示後に画像にマスクがスライドアウト （グラデーションあり）*/
.smooth {
	position: relative;
	clip-path: inset(0 100% 0 0);
	transition: 1s cubic-bezier(0.37, 0, 0.63, 1);
	transition-property: clip-path;
	overflow: hidden;
}
.smooth.isActive {clip-path: inset(0);}
.smooth::after {
	content: '';
	opacity: .5;
    position: absolute;
    top: 0;
    left: 0;
	z-index: 1;
    width: 100%;
    height: 100%;
	transition: .5s;
}
/* スライドイン表示後に画像にマスクがスライドアウト （グラデーションなし）*/
.imgcover {position:relative;overflow:hidden;}
.imgcover.isActive::after {  
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	background-color: var(--blue);
	animation: secondaryImageOverlayIn 0.6s 0s cubic-bezier(.77, 0, .175, 1.2),
			 secondaryImageOverlayOut 0.6s 0.6s cubic-bezier(.77, 0, .175, 1.2);
	animation-fill-mode: both;
}
@keyframes secondaryImageOverlayIn {
    0% {
      width: 0;
    }
    100% {
      width:  100%;
    }
}
@keyframes secondaryImageOverlayOut {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(102%);
    }
}
.imgcover img,
.imgcover figcaption {opacity: 0;}
.imgcover.isActive img,
.imgcover.isActive figcaption {
	animation:fadeIn 0.1s 0.5s; 
	animation-fill-mode: both;
}
@keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
}
/* 画像の zoom out */
.zommoutImg {
	opacity: 0;
	overflow: hidden;
	position: relative;
}
.zommoutImg.isActive {opacity: 1;}
.zommoutImg img {
	display: block;
	height: auto;
	width: 100%;
}
.zommoutImg.isActive img {
	opacity: 1;
	animation: zommoutImg 1.5s cubic-bezier(.4, 0, .2, 1);
}
@keyframes zommoutImg {
	0% {
		opacity: 0;
		transform: scale(1.2);
	}
	32% {
		opacity: 0;
		transform: scale(1.2);
	}
}
/* 画像がzoom outしながら出てくる */
.zoom_photo {
	overflow: hidden;
	position: relative;
}
.zoom_photo img {
	width: 100%;
	height: auto;
	transform: scale(1.3);
	transition: transform 1.5s ease;
}
.zoom_photo.isActive img {
	transform: scale(1);
}
/* 背景画像がzoom outしながら出てくる */
.bg_zoom {position: relative;overflow: hidden;}
.bg_zoom::before {
	content: '';
	position: absolute;
	top: -20px;
	left: -20px;
	right: -20px;
	bottom: -20px;
	z-index: -1;
	will-change: transform;
	transform: scale(1.3);
	transition: none;
}
.bg_zoom.is-visible::before {
	transform: scale(1);
	transition: transform 2s ease-out;
}

/* ==================== remodal（初期非表示） ==================== */
.remodal,
[data-remodal-id],
.remodal-overlay,
.remodal-wrapper {display: none;}