@charset "utf-8";

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.btn,
a.btn,
button.btn,
.menu-button {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  border-radius: 50vh;
}

:root {
    --font-family-a: "Zen Kaku Gothic Antique", sans-serif;
    --font-family-b: "Krona One", sans-serif;
}

body {
    font-family: var(--font-family-a);
    font-weight: 400;
    font-style: normal;
    color: #014099;
}
.en {
    font-family: var(--font-family-b);
    font-weight: 900;
    font-size: 3.75rem;
}
.btn-txt,
h2.heading .ja {
    font-weight: 500;
}


/*-- common --*/
.flex {
    display: flex;
}
.flex-pc {
    display: flex;
}
img {
    width: 100%;
    height: auto;
}
.site-map-link-heading {
    margin-top: .5rem;
}
.site-map-link-heading::after {
    display: block;
    content: "";
    background: #014099;
    width: 5rem;
    height: 1.25px;
    margin-top: .5rem;
}
.marquee {
    position: relative;
    margin-top: -2rem;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}
.marquee-content {
    color: transparent;
  display: flex;
  gap: 20px; /* テキスト同士の間隔 */
  animation: marquee-loop 10s linear infinite;
  letter-spacing: .25rem;
   -webkit-text-stroke-width: 1.25px;
  -webkit-text-stroke-color: rgba(1, 64, 153, .25);
  text-transform: uppercase;
}
.products .marquee-content .en {
    font-size: 7rem;
}

@keyframes marquee-loop {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-50%); /* 半分の位置まで移動 */
  }
}
.info-wrap {
    padding-left: 71px;
}
.access-tel-fax li {
    padding-top: 1rem;
}
.tel-fax li {
    padding-top: 0;
}
.fax {
    padding-left: 1rem;
}
.sp-only {
    display: none;
}
.inner {
    width: calc(100% - 142px);
    margin: auto;
}
.mid-inner {
    width: calc(100% - 200px);
    margin: auto;
}
h2.heading {
    padding-top: 5rem;
}
body:not(#top) main h2.heading {
    padding: 2rem 0;
}
h2.heading .ja {
    display: block;
    padding-top: 1rem;
}
h2.heading::after {
    display: block;
    background: #014099;
    content: "";
    width: 2rem;
    height: 1.25px;
    margin-top: .5rem;
}
.txt {
    padding-top: 2rem;
    line-height: 2;
    margin: -8px 0;
}
.clearfix::after {
    content: "";
    display: none;
}


/*-- btn --*/
.btn {
    transition: all 0.3s ease;
}
.btn:hover {
    transition: all 0.3s ease;
}
.material-symbols-outlined {
    vertical-align: middle;
}
.btn-link-01,
.menu-button {
    position: relative;
    padding: .75rem 1.5rem;
    border: #014099 1.25px solid;
    color: #014099;
}
.menu-button {
    background: #fff;
}
.btn-link-01 {
    overflow: hidden;
}
.btn-link-01::before,
.btn-link-01::after {
    background: #fff;
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    content: "";
}
.btn-link-01::before {
    width: 100%;
    height: 100%;
}
.btn-link-01::after {
    z-index: -1;
    background: #014099;
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.25, 1.5, 0.5, 1);
    transition: 0.3s;
}
.btn-link-01:hover {
    color: #fff;
}
.btn-link-01:hover::after {
    transform: scaleX(1);
}
.btn-link-02 .btn-icons-txt {
    padding-bottom: .5rem;
    border-bottom: #014099 1.25px solid;
    margin-right: 1rem;
}
.btn-link-02 .btn-icons-txt span {
    vertical-align: middle;
}
.btn-link-02 .circle {
    color: #fff;
    background: #014099;
    padding: 1rem;
    border-radius: 100%;
}
.btn-link-02:hover .circle {
    padding: 1.5rem;
    transition: all 0.3s ease;
}


/*-- header --*/
header {
    position: fixed;
    z-index: 99;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
}
.logo {
    width: 251px;
    height: auto;
}
.header-aside,
.other-btns {
    gap: 1rem;
}
.other-btns li {
    align-items: center;
}


/*-- glo-nav --*/
.glo-nav {
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 98;
    width: 100%;
    height: 100vh;
    padding-top: 10rem;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    transition: all .4s ease;
}
.glo-nav.active {
    display: block;
    visibility: visible;
    opacity: 1;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    transition: all .4s ease;
}
.site-map {
    padding-left: 71px;
    gap: 3rem;
    width: 100%;
}
.site-map-link .en {
    font-size: 2rem;
}
.site-map-link:nth-of-type(2) {
    margin-top: 2rem;
}
.site-map-sub-wrap {
    margin-top: 1.5rem;
    flex-direction: column;
    gap: 1rem;
}
.glo-nav .img-area {
    width: 100%;
    align-items: end;
    border-radius: 50vh 0 0 50vh;
    overflow: hidden;
}


/*-- top --*/
.top {
    position: relative;
    width: 100%;
}
#top .top {
    height: 100vh;
}
#top .top::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100vh;
    background: url('../img/01_top/top-bg.png') no-repeat border-box center/cover content-box;
}
#top .top h2.heading .en {
    text-transform: uppercase;
}
.top h2.heading {
    padding-left: 5.197657393850659vw;
    padding-top: 10.834553440702782vw;
}
.top h2.heading .sub {
    color: transparent;
    font-size: 2rem;
    -webkit-text-stroke-width: .625px;
    -webkit-text-stroke-color: #014099;
    text-transform: capitalize;
}
.top h2.heading .main{
    padding-top: .5rem;
}
.top h2.heading .ja {
    display: block;
    padding-top: .5rem;
}
.top .img-box {
    position: relative;
    width: 59.736456808199122vw;
    margin-top: 10.416666666666667%;
}
.top .img-box .img-area {
    width: 78.676470588235294%;
    border-radius: 0 50vh 50vh 0;
    overflow: hidden;
}
.top .top-prints-body {
    position: absolute;
    right: -5.856515373352855vw;
    top: -4.062957540263543vw;
    width: 29.721815519765739vw;
}
.top .acrylic-wrap {
    width: 38.251830161054173vw;
    margin-top: 13.020833333333333vh;
    margin-left: 1.537335285505124vw;
}
.top .acrylic-wrap .mask {
    mix-blend-mode: overlay;
}
.top .acrylic-stand-wrap,
.top .acrylic-key-wrap {
    position: relative;
}
.top .acrylic-stand-wrap {
    width: 16.98389458272328vw;
}
.top .acrylic-wrap .body {
    position: absolute;
    left: 0;
}
.top .acrylic-key-wrap {
    width: 22.5vw;
    margin-left: -2.635431918008785vw;
    margin-top: 9.114583333333333vh;
}
.top .acrylic-link {
    position: absolute;
    right: 2rem;
    bottom: 2rem;
    width: 18.301610541727672vw;
}
.acrylic-link-circle {
  display:inline-block;
  width:100%;
  height:100%;
}
.acrylic-link-circle{
  animation:10s linear infinite rotation;
}
@keyframes rotation{
  0%{ transform:rotateZ(0);}
  100%{ transform:rotateZ(360deg); }
}
.acrylic-link-body {
    width: 14.641288433382138vw;
    position: absolute;
    top: 3.660322108345534vw;
    left: 0.732064421669107vw;
}
.fukidashi {
    position: absolute;
    left: 0;
    animation: fluffy 3s infinite;
}
@keyframes fluffy {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}


/*-- products --*/
.products {
    position: relative;
}
.products .marquee {
    position: absolute;
    top: 6rem;
    z-index: -1;
    -webkit-text-stroke-width: 1.25px;
}
.products h2.heading {
    margin-top: 6rem;
}
.btn-wrap {
    margin-top: 2rem;
    gap: 3rem;
}
#top .products-list-wrap,
#products .products-list-wrap {
    flex-wrap: wrap;
    justify-content: left;
    padding-top: 2rem;
}
#top .products-item,
#products .products-item {
    width: 32%;
    margin-right: 2%;
    transition: all 0.3s ease;
}
#top .products-item:nth-of-type(3n),
#products .products-item:nth-of-type(3n) {
    margin-right: 0;
}
#top .products-item:nth-of-type(n+4),
#products .products-item:nth-of-type(n+4) {
    margin-top: 2%;
}
#top .products-item figure {
    position: absolute;
    z-index: 1;
}
#top .products-item:hover {
    color: #fff;
    transition: all 0.3s ease;
}
#top .products-item figure .en {
    font-size: 2rem;
    color: transparent;
    -webkit-text-stroke-width: .625px;
    -webkit-text-stroke-color: #014099;
    transition: all 0.3s ease;
}
#top .products-item:hover figure .en {
    color: #014099;
    transition: all 0.3s ease;
}
#top .products-item-thumb {
    width: calc(100% - 3rem);
    margin: 1.5rem;
    overflow: hidden;
}
#top .products-item:hover .products-item-thumb img {
    transform: scale(1.1);
    transition: all 0.3s ease;
}
.products-item-txt {
    position: relative;
    background: rgba(255, 255, 255, .75);
    width: calc(100% - 4rem);
    margin-left: 4rem;
    padding: 1rem;
    border: #014099 1.25px solid;
    margin-top: -3rem;
    transition: all 0.3s ease;
}
#top .products-item object .btn-link-01 {
    margin-top: 1rem;
}
#top .products-item:hover object .btn-link-01 {
    border: #fff 1.25px solid;
}
#top .products-item object .btn-link-01:hover {
    color: #fff;
}
#top .products-item:hover .products-item-txt {
    background: #014099;
    transition: all 0.3s ease;
}
.products-item-txt h3.heading {
    font-size: 1.125rem;
    font-weight: 700;
    align-items: center;
    justify-content: space-between;
}
.products-item-txt p.txt {
    margin-top: .5rem;
    padding-top: .5rem;
    line-height: 1.5rem;
    margin: -4px 0;
}
.products-item-txt .txt::before {
    display: block;
    background: #014099;
    content: "";
    width: 2rem;
    height: 1.25px;
    margin-bottom: .5rem;
}


/*-- about-us --*/
.about-us {
    position: relative;
}
.about-us .txt-img-box {
    justify-content: space-between;
    padding-top: 25vw;
}
.lead-txt {
    font-size: 1.5rem;
    line-height: 3rem;
    font-weight: 700;
    letter-spacing: .125rem;
    margin: -8px 0;
    padding-top: 2rem;
}
.about-us .lead-txt {
    font-weight: 500;
    letter-spacing: .5rem;
    margin: 0 -9px;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    padding: 0 2rem
}
.about-us .txt-area {
    padding-top: 6rem;
}
.about-us .txt-img-box img {
    width: 45%;
}
.about-us .btn-link-02 {
    margin-top: 6rem;
}
.x-feed-wrap {
    margin-top: 5rem;
}


/*-- online-shop --*/
.online-shop {
    width: calc(100% - 142px);
    color: #fff;
    background: url('../img/00_common/online-shop-link.png') no-repeat border-box center/cover content-box;
    margin: auto;
    border-radius: 12.5px;
    overflow: hidden;
}
.online-shop .inner {
    flex-direction: column;
    width: 100%;
    padding: 4rem;
    padding-left: calc(4rem + 50%);
}
.online-shop .inner::after {
    content: "";
    width: 100%;
    height: 4rem;
}
.online-shop h2.heading {
    padding-top: 0;
}
.online-shop h2.heading::after {
    background: #fff;
}
.online-shop .btn-link-02 {
    margin-top: 2rem;
    text-align: right;
}
.online-shop .btn-link-02 .btn-icons-txt {
    border-bottom: #fff 1.25px solid;
}
.online-shop .btn-link-02 .material-symbols-outlined:last-of-type {
    color: #014099;
}
.online-shop .btn-link-02 .circle {
    background: #fff;
}


/*-- contact --*/
.contact {
    position: relative;
    color: #fff;
}
.contact::before {
    content: "";
    position: absolute;
    z-index: -1;
    background: url('../img/00_common/contact-bg.png') no-repeat border-box center/cover content-box;
    left: 0;
    top: -4rem;
    display: block;
    content: "";
    width: 100%;
    height: calc(4rem + 100%);
}
.contact a {
    position: relative;
    padding-top: 4rem;
    transition: all 0.3s ease;
}
.contact a::after {
    content: "";
    display: block;
    width: 100%;
    height: 4rem;
}
.contact .circle {
    position: absolute;
    right: 171px;
    top: 5rem;
    padding: 3rem;
    border: #fff 1.25px solid;
    border-radius: 100%;
}
.contact a:hover .circle {
    padding: 3.5rem;
    transition: all 0.3s ease;
}


/*-- footer --*/
footer {
    background: #014099;
    color: #fff;
    padding: 2rem 71px;
}



/*----- about-us -----*/
/*-- breadcrumb --*/
.breadcrumb {
    font-size: 1rem;
    font-weight: bold;
    align-items: center;
    gap: 1rem;
}
.breadcrumb li {
    position: relative;
}
.breadcrumb li::after {
    content: "/";
}
.breadcrumb li:last-of-type::after {
    display: none;
}
.top .breadcrumb {
    width: calc(100% - 4rem);
    padding-top: 6rem;
    margin: auto;
}


/*-- main --*/
.about-us::before,
#about-us .top::before {
    position: absolute;
    z-index: -1;
    content: "";
    background: url('../img/01_top/about-us-bg.png') no-repeat border-box center/cover content-box;
    top: 10vw;
    width: 100%;
    height: 35vw;
}
#about-us .top::before {
    top: calc(100px + 7rem);
}
#about-us .overview {
    padding-top: 40vw;
}


/*-- overview --*/
.overview {
    padding-top: 40vw;
}
.overview .txt-img-box,
.booklet .txt-img-box {
    justify-content: space-between;
}
.booklet .txt-img-box {
    padding-top: 2rem;
}
.overview .txt-box,
.overview .img-area,
.booklet .txt-box,
.booklet .img-area {
    width: calc(50% - 1.5rem);
}
.overview .txt-box h2.heading {
    padding-top: 0;
}
.overview .img-area {
    width: auto;
    height: 100%;
    overflow: hidden;
    border-radius: 6.25px;
}
.overview .img-area img {
    width: 100%;
    height: auto;
}


/*-- flow --*/
.flow img {
    display: block;
    margin-top: 2rem;
    box-shadow: 0px 0px 5px rgba(0, 64, 153, .2);
}


/*-- features --*/
.features {
    margin-top: 5rem;
}
.features-intro {
    color: #fff;
    background: #014099;
    padding-bottom: 5rem;
}
.features h2.heading::after {
    background: #fff;
}
.features-link {
    gap: 1rem;
    margin-top: 2rem;
}
.features-link-item {
    position: relative;
    width: calc(25% - .5rem);
    font-size: 1.125rem;
    line-height: 1.444444444444444;
    font-weight: 700;
    color: #014099;
    background: #fff;
    padding: 1.125rem 1.125rem 5rem;
    margin: -4px 0;
}
.features-link-item .circle {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    padding: 1rem;
    border: #014099 1.25px solid;
    border-radius: 50vh;
}
.features-item {
    width: calc(100% - 171px);
    gap: 3rem;
    margin-top: 3rem;
    align-items: center;
}
.features-item:first-of-type {
    margin-top: 5rem;
}
.features-item:nth-of-type(odd) {
    flex-direction: row-reverse;
}
.features-item:nth-of-type(even) {
    margin-left: 171px;
}
.features-item .txt-area {
    width: calc(50% - 1.5rem);
}
.features-item .txt-area .lead-txt {
    padding-top: 0;
}
.features-item .txt-area .lead-txt::after {
    display: block;
    content: "";
    width: 2rem;
    height: 1.25px;
    margin-top: 1rem;
}
.features-item .txt-area .txt {
    padding-top: 1rem;
}
.features-item .img-area {
    width: calc((50% - 1.5rem));
    height: 100%;
    border-radius: 6.25px 0 0 6.25px;
    overflow:hidden ;
}
.features-item:nth-of-type(odd) .img-area {
    border-radius: 0 6.25px 6.25px 0;
}


/*-- equipement --*/
.equipment-list {
    padding-top: 2rem;
}
.equipment-list-wrap {
    flex-wrap: wrap;
    gap: 3rem;
}
.equipment-item {
    width: calc(50% - 1.5rem);
}
.equipment-item .equipment-item-thumb {
    width: 100%;
    border-radius: 6.25px;
    overflow: hidden;
}
.equipment-item .products-item-txt h3.heading {
    line-height: 1.5;
    margin: -3px 0;
}


/*-- company --*/
.table-wrap {
    margin-top: 3rem;
    gap: 3rem;
    align-items: flex-start;
}
table {
    width: calc(50% - 1.5rem);
}
th {
    width: 25%;
    padding: 1rem;
    border-top: #014099 1.25px solid;
}
td {
    width: 75%;
    padding: 1rem;
    border-top: rgba(1, 64, 153, .25) 1.25px solid;
}
tr:last-of-type th {
    border-bottom: #014099 1.25px solid;;
}
tr:last-of-type td {
    border-bottom: rgba(1, 64, 153, .25) 1.25px solid;
}
.company iframe {
    width: 100%;
    height: 35rem;
    margin: 5rem auto;
}


/*-- products --*/
#products .bnr-area {
    display: block;
    width: 970px;
    margin: auto auto 5rem;
}
#products .bnr-area img {
    width: 100%;
}
#products .products-intro .btn-wrap {
    justify-content: space-between;
    gap: 0;
}
#products .products-item-thumb {
    border: #014099 1.25px solid;
}
.booklet-item h3.heading .ja {
    display: block;
}
.booklet-list {
    width: 100%;
    flex-wrap: wrap;
    margin-right: 16px;
    justify-content: left;
    margin-bottom: 3rem;
}
.booklet-item  {
    width: calc(25% - 16px);
    margin-top: 2rem;
    margin-right: 16px;
}
.booklet-item:nth-of-type(4n) {
    margin-right: 0;
}
.booklet-item .products-item-txt {
    position: relative;
    width: 100%;
    margin-left: 0;
    margin-top: 0;
}
.promotion {
    margin-bottom: 5rem;
}


/*-- contact --*/
.contact-tel {
    margin-top: 30vw;
}
.contact-tel h2.heading {
    padding-top: 2rem;
}
.contact-tel h2.heading::after {
    display: none;
}
.contact-tel .inner {
    border: #014099 1.25px solid;
    border-radius: 50vh;
    padding-bottom: 2rem;
}
.contact-tel .flex {
    font-size: 1.5rem;
    align-items: center;
    justify-content: center;
    padding-bottom:1.5rem;
}
.contact-tel {
    text-align: center;
}


/*----- contact -----*/
.contact-top {
    width: calc( 100% - 50px );
    margin: 0 auto;
}
.contact-form h2.heading {
    text-align: center;
    padding-top: 100px;
}
.contact-form-wrap {
    padding-top: 50px;
}
dl {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
dl:not(:first-of-type) {
    padding-top: 37.5px;
}
dd {
    background: rgba(1, 85, 125, .125);
    width: 75%;
    height: auto;
    border: #01557D 1px solid;
    border-radius: 6.25px
}
input,
textarea {
    width: 100%;
    padding: 12.5px;
}
textarea {
    height: 10em;
    line-height: 1.5;
    margin: -4px 0;
    resize: vertical;
}
.btn.submit {
    background: #01557D;
    color: #fff;
    display: block;
    margin: 50px auto 0;
    padding: 1.5rem 7.5rem;
}
.btn.submit:hover {
    opacity: .75;
}
.btn.submit::after {
    display: none;
}
.contact-form {
    margin-bottom: 5rem;
}