@charset "utf-8";

@import "base.css";
@import "common.css";
@import "layout.css";
@import "layoutFull.css";
@import "layoutNav.css";


/* common
---------------------------------------------------*/
#techniqueBl{
    padding: 10px 20px;
    border: 1px solid #bfbfbf;
    display: inline-block;
    position: absolute;
    top: -55px;
}

#techniqueBl ul{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap:10px;
}

#techniqueBl ul:before{
    content: "利用技術：";
}

#techniqueBl ul li a{
    color: #fff;
    font-weight: 700;
    background: #dc186e;
    border: 2px solid #dc186e;
    padding: 0 35px;
    border-radius: 20px;
    line-height: 36px;
    transition: all 0.5s ease 0s;
    display: block;
}

#techniqueBl ul li a:hover{
    color: #dc186e;
    background: #FFF;
    border: 2px solid #dc186e;
}

#techniqueBl + *{
    margin-top: 25px;
}

#box01:has(.visualBl + p){
    margin-bottom: 80px;
}

#box01:has(.visualBl){
    margin-bottom: 130px;
}

.visualBl{
    position: relative;
    background: #F9D1E2;
    background: linear-gradient(90deg, rgba(249, 209, 226, 1) 0%, rgba(243, 229, 244, 1) 100%);
    padding: 35px 35px 0 35px;
    display: flex;
    justify-content: space-between;
    gap:0 60px;
    margin-bottom: 60px;
}

.visualBl.noImage{
    padding: 35px 35px 20px 35px;
}

.visualBl.columnR{
    flex-direction: column-reverse;
}

.visualBl.columnR > div{
    width: 100%;
    text-align: center;
}

.visualBl .txt{
    flex: 1;
    padding: 10px 0 20px 0;
    align-self: flex-start;
}

.visualBl .txt p{
    font-size: 1.8rem;
    line-height: 2.5;
    font-weight: 700;
}

.visualBl .img{
    align-self: flex-end;
    width: 300px;
    margin-bottom: -40px;
}

.visualBl .img img.border{
    border: 1px solid #F9D1E2;
}

body.Product #flexMain h2{
    margin-bottom: 15px;
}

body.Product #flexMain .box + .box {
  margin-top: 70px;
}

body.Product #flexMain .box p {
  line-height: 2.25;
}

body.Product #flexMain .box p.fontS{
    margin-top: 4em;
    font-size: 1.4rem;
}

body.Product #flexMain .imgBl {
  margin: 20px auto 40px;
}

body.Product #flexMain .column02 .imgBl {
    margin: 0;
}

.catalogBl{
    padding: 40px;
    border: 1px solid #bfbfbf;
}

.catalogBl h2{
    text-align: center !important;
    margin-bottom: 40px !important;
}

.catalogBl .catalogList{
    display: flex;
    justify-content: center;
    gap:0 45px;
}

.catalogBl .catalogList .catalogItem{
    max-width: 30%;
}

.catalogBl .catalogList .catalogItem a{
    transition: all 0.5s ease;
}

.catalogBl .catalogList .catalogItem a:hover{
    color: #dc186e;
}

.catalogBl .catalogList .catalogImg{
    max-width: 142px;
    margin: 0 auto;
}

.catalogBl .catalogList .catalogImg .border{
    border: 1px solid #bfbfbf
}

.catalogBl .catalogList span{
    display: block;
    margin-top: 10px;
    line-height: 1.6;
    text-align: center;
}

.catalogBl .catalogList span:after{
  content: "";
  display: inline-block;
  width: 15px;
  height: 19px;
  margin-left: 5px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 15px auto;
  background: url("../img/common/icn_pdf.svg") no-repeat left center;
  position: relative;
  top: 3px;
}


h2 + .movieList{
    margin-top: 25px;
}

.movieList{
    display: flex;
    justify-content: center;
    gap:0 50px;
}

.movieList .movieItem{
    max-width: 410px;
}

.movieList .movieTit{
    text-align: center;
    background: #dc186e;
    color: #fff;
    font-weight: 700;
    font-size: 2.0rem;
    display: block;
    padding: 8px 0;
    line-height: 1.4;
}

.movieList .movieImg{
    position: relative;
}

.movieList .movieImg:before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url("../img/common/icn_movie02.png") no-repeat center center;
    background-size: 80px auto;
}

#faqBl{
    margin-top: 75px;
    padding: 80px 0 280px;
}

#faqBl dl + dl{
    margin-top: 25px;
}

#faqBl dl dt{
    background: #fff;
    border-radius: 10px;
    line-height: 1.8;
    display: flex;
    align-items: center;    
    padding: 12px 15px 12px 30px;
    gap:0 25px;
    align-items: first baseline;
}

#faqBl dl dt:before{
    content: "Q";
    font-size: 2.4rem;
    font-weight: 700;
}

#faqBl dl dt span{
    background: #fff;
    border-radius: 10px;
    line-height: 2.35;
    width: 100%;
}

#faqBl dl dd{
    padding: 25px 70px 0 70px;
    line-height: 2.35;
    position: relative;
}

#faqBl dl a{
    text-decoration: underline;
}

#faqBl dl a:hover{
    text-decoration: none;
}

#faqBl dl dd:before{
    content: "A";
    font-size: 2.4rem;
    font-weight: 700;
    color: #dc186e;
    position: absolute;
    left: 35px;
    top: 15px;
}

#faqBl + #contactBl{
    margin-top: -185px;
}

#contactBl{
    margin-top: 75px;
    padding: 0;
}

#contactBl .bgPinkArea{
    padding: 45px 50px;
    margin-bottom: 0;
}

#contactBl h2{
    text-align: center;
    font-size: 3.0rem;
    font-weight: 500;
    margin: 0 0 30px 0;
    color: #dc186e;
}

#contactBl .contactPerson{
    text-align: center;
}

#contactBl .contactBtn{
    margin: 20px auto;
}

#contactBl .contactBtn.btn a{
    height: 56px;
    line-height: 56px;
    color: #fff;
    background: #dc186e;
    border-color: #dc186e;
    box-shadow: none;
    border-radius: 30px;
    width: 440px;
}

#contactBl .contactBtn.btn a:hover{
    color: #dc186e;
    background: #fff;
    border-color: #dc186e;
}

#contactBl .contactNumber{
    text-align: center;
    font-size: 2.0rem;
    line-height: 1.6;
}

h2 + .column02{
    margin-top: 25px;
}

.column02{
    gap:0 4.294478527%;
}

.column02 .imgBl{
    max-width: 410px;
    width: 50.306748466%;
}

.column02 .txt{
    flex: 1;
}

@media only screen and (max-width:767px) {
    #techniqueBl{
        padding: calc(15vw / 7.5) calc(30vw / 7.5);
        position: inherit;
        top: inherit;
        margin:calc(-35vw / 7.5) auto 0;
        display: flex;
        justify-content: center;
        width: fit-content;        
    }

    #techniqueBl ul{
        gap:calc(10vw / 7.5) calc(15vw / 7.5);
        flex-wrap: wrap;
    }

    #techniqueBl ul li a{
        padding: 0 calc(40vw / 7.5);
        border-radius:calc(30vw / 7.5);
        line-height:calc(56vw / 7.5);
    }

    #techniqueBl + *{
        margin-top: calc(40vw / 7.5);
    }
    
    #box01:has(.visualBl + p),
    #box01:has(.visualBl){
        margin-bottom: calc(120vw / 7.5);
    }

    .visualBl{
        padding: calc(35vw / 7.5);
        flex-direction: column;
        gap:calc(40vw / 7.5) 0;
        margin-bottom: calc(40vw / 7.5)
    }
    
    .visualBl.noImage{
        padding: calc(35vw / 7.5);
    }    
    
    .visualBl.columnR{
        flex-direction: column;
    }

    .visualBl .txt{
        padding: 0;
    }

    .visualBl .txt p{
        text-align: left;
        font-size: calc(28vw / 7.5);
    }

    .visualBl .img{
        width: calc(300vw / 7.5);
        margin: 0 auto;
    }
    
    .visualBl .img img.border{
        border: none;
    }

    body.Product #flexMain h2{
        margin-bottom: calc(40vw / 7.5);
    }
    
    body.Product #flexMain .box + .box {
      margin-top: calc(90vw / 7.5);
    }

    body.Product #flexMain .box p {
      line-height: 1.8;
    }    
    
    body.Product #flexMain .box p.fontS{
        margin-top: 1.5em;
        font-size: calc(24vw / 7.5);
    }
    
    body.Product #flexMain .imgBl {
      margin: calc(30vw / 7.5) auto calc(60vw / 7.5);
    }
    
    .catalogBl{
        padding: calc(50vw / 7.5) calc(35vw / 7.5);
    }

    .catalogBl h2{
        margin-bottom: calc(50vw / 7.5) !important;
    }

    .catalogBl .catalogList{
        display: flex;
        justify-content: center;
        gap:calc(35vw / 7.5) 0;
        flex-wrap: wrap;
    }

    .catalogBl .catalogList .catalogItem{
        width: 100%;
        max-width: inherit;
    }

    .catalogBl .catalogList .catalogItem a{
        display: flex;
        justify-content: space-between;
        gap:0 calc(25vw / 7.5);
        align-items: center;
    }    

    .catalogBl .catalogList .catalogImg{
        max-width:calc(228vw / 7.5) ;
    }

    .catalogBl .catalogList span{
        flex: 1;
        margin-top: 0;
        text-align: left;
    }

    h2 + .movieList{
        margin-top: calc(40vw / 7.5);
        flex-wrap: wrap;
        gap:calc(30vw / 7.5) 0;
    }

    .movieList .movieItem{
        width: 75%;
    }

    .movieList .movieTit{
        font-size: calc(30vw / 7.5);
        padding: calc(15vw / 7.5) 0;    
    }
    
    .movieList .movieImg:before{
        background: url("../img/common/icn_movie02.png") no-repeat center center;
        background-size: 25% auto;
    }
    

    #faqBl{
        margin-top: calc(90vw / 7.5) !important;
        padding: calc(80vw / 7.5)  0 calc(400vw / 7.5);
    }

    #faqBl dl + dl{
        margin-top: calc(30vw / 7.5);
    }

    #faqBl dl dt{
        padding: calc(20vw / 7.5)  calc(30vw / 7.5) calc(30vw / 7.5) calc(30vw / 7.5);
        gap:0 calc(30vw / 7.5);
    }

    #faqBl dl dt:before{
        font-size:  calc(39vw / 7.5);
    }

    #faqBl dl dt span{
        line-height: 1.8;
        padding-right: calc(70vw / 7.5);
    }

    #faqBl dl dt span::after{
        top: 0;
    }
    
    #faqBl dl dd{
        padding: calc(30vw / 7.5)  calc(30vw / 7.5) 0 calc(90vw / 7.5);
        line-height: 1.8;
    }

    #faqBl dl dd:before{
        font-size:  calc(39vw / 7.5);
        left: calc(30vw / 7.5);
        top: calc(15vw / 7.5);
    }
    
    #faqBl dl dd:before{
        font-size:  calc(39vw / 7.5);
    }

    #faqBl + #contactBl{
        margin-top: calc(-310vw / 7.5) !important;
    }

    #contactBl{
        margin-left:calc(40vw / 7.5 );
        margin-right: calc(40vw / 7.5);
        margin-top: calc(90vw / 7.5) !important;
    }
    
    #contactBl .bgPinkArea{
        padding:calc(90vw / 7.5) calc(55vw / 7.5);
    }

    #contactBl h2{
        font-size:calc(38vw / 7.5);
        margin: 0 0 calc(60vw / 7.5) 0;
    }

    #contactBl .contactPerson{
        text-align: center;
    }

    #contactBl .contactBtn{
        margin: calc(35vw / 7.5) auto;
    }

    #contactBl .contactBtn.btn a{
        height: calc(76vw / 7.5);
        line-height: calc(76vw / 7.5);
        border-radius: calc(40vw / 7.5);
        width: auto;
        font-size: calc(30vw / 7.5);
    }

    #contactBl .contactNumber{
        font-size: calc(30vw / 7.5);
    }
    
    h2 + .column02{
        margin-top: calc(40vw / 7.5);
    }

    .column02{
        gap: calc(40vw / 7.5) 0;
    }

    .column02 .imgBl,
    .column02 .txt{
        max-width: inherit;
        width: 100%;
    }

    
}
    
/* product
---------------------------------------------------*/
/*index*/
#index #box01 .bgPinkArea{
    padding: 25px 40px;
    margin-bottom: 60px;
}

#index #box01 .bgPinkArea .column02{
    justify-content: space-between;
    align-items: center;
}

#index #box01 .bgPinkArea .column02 > *{
    width: inherit;
}

#index #pageAnchor{
    margin: 0;
}

#index #box02{
    margin-top: 60px;
    --base-width: min(100vw, 1280px);
}

#index #box02 .illust{
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
}

#index #box02 .illust img{
    max-width: inherit;
    width: 100%;
}

#index #box02 .illust .fukidashi {
    position: absolute;
    width: calc(142.5 * var(--base-width) / 1280);
    transform: scale(0.81);
    transform-origin: bottom center;

    /* 【解決策】マウスを外した時専用のアニメーション */
    /* スッ...と戻るのではなく、少し小さくなってから戻るリズムにします */
    animation: fukidashi-back-home 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* 【追加】右矢印用の設定 */
#index #box02 .illust .fukidashi.is-right {
    /* 右下を起点に固定する */
    transform-origin: right center;
}

#index #box02 .illust .fukidashi:hover {
    /* ホバー時のドカン！というバウンド（1.25） */
    animation: fukidashi-re-appear 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* 登場：勢いよく跳ねる */
@keyframes fukidashi-re-appear {
    0% { transform: scale(0.81); }
    50% { transform: scale(1.25); }
    100% { transform: scale(1.0); }
}

/* 【追加】戻り：少し縮んでから0.81に着地する */
@keyframes fukidashi-back-home {
    0% { transform: scale(1.0); }
    100% { transform: scale(0.81); } /* 最後に 0.81 に戻る */
}

/* --- イラスト内の特定エリアをホバーした時の連動設定 --- */

/* 例：railwayのヒットエリアをホバーしたら、railwayの吹き出しを跳ねさせる */
#index #box02 .illust:has(.railway-hit:hover) .fukidashi.railway,
#index #box02 .illust:has(.truck-hit:hover) .fukidashi.truck,
#index #box02 .illust:has(.developed-alloy-hit1:hover) .fukidashi.developed-alloy,
#index #box02 .illust:has(.developed-alloy-hit2:hover) .fukidashi.developed-alloy,
#index #box02 .illust:has(.heatsink-hit:hover) .fukidashi.heatsink,
#index #box02 .illust:has(.telecommunication-hit1:hover) .fukidashi.telecommunication,
#index #box02 .illust:has(.telecommunication-hit2:hover) .fukidashi.telecommunication,
#index #box02 .illust:has(.architecture-hit:hover) .fukidashi.architecture,
#index #box02 .illust:has(.neutron-absorber-hit:hover) .fukidashi.neutron-absorber,
#index #box02 .illust:has(.food-life-hit:hover) .fukidashi.food-life{
    animation: fukidashi-re-appear 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

#index #box02 .hit-area{
    position: absolute;
}

#index #box02 .illust {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
}

#index #box02 .illust img {
    width: 100%;
    display: block;
}

/* 共通設定：ピンとヒットエリアを絶対配置に */
#index #box02 .hit-area,
#index #box02 .fukidashi {
    position: absolute;
}

/* --- ヒットエリア（hit-area） --- */
#index #box02 .railway-hit {
    top: calc(450 * var(--base-width) / 1280);
    left: calc(100 * var(--base-width) / 1280);
    width: calc(340 * var(--base-width) / 1280);
    height: calc(30 * var(--base-width) / 1280);
    transform: rotate(-30deg);
}

#index #box02 .truck-hit {
    top: calc(560 * var(--base-width) / 1280);
    left: calc(1000 * var(--base-width) / 1280);
    width: calc(130 * var(--base-width) / 1280);
    height: calc(70 * var(--base-width) / 1280);
    transform: rotate(35deg);
}

#index #box02 .developed-alloy-hit1 {
    top: calc(300 * var(--base-width) / 1280);
    left: calc(930 * var(--base-width) / 1280);
    width: calc(200 * var(--base-width) / 1280);
    height: calc(130 * var(--base-width) / 1280);
}

#index #box02 .developed-alloy-hit2 {
    top: calc(195 * var(--base-width) / 1280);
    left: calc(1065 * var(--base-width) / 1280);
    width: calc(140 * var(--base-width) / 1280);
    height: calc(140 * var(--base-width) / 1280);
}

#index #box02 .heatsink-hit {
    top: calc(195 * var(--base-width) / 1280);
    left: calc(630 * var(--base-width) / 1280);
    width: calc(340 * var(--base-width) / 1280);
    height: calc(30 * var(--base-width) / 1280);
    transform: rotate(-30deg);
}

#index #box02 .telecommunication-hit1 {
    top: calc(30 * var(--base-width) / 1280);
    left: calc(580 * var(--base-width) / 1280);
    width: calc(280 * var(--base-width) / 1280);
    height: calc(130 * var(--base-width) / 1280);
}

#index #box02 .telecommunication-hit2 {
    top: calc(120 * var(--base-width) / 1280);
    left: calc(590 * var(--base-width) / 1280);
    width: calc(80 * var(--base-width) / 1280);
    height: calc(80 * var(--base-width) / 1280);
}

#index #box02 .architecture-hit {
    top: calc(500 * var(--base-width) / 1280);
    left: calc(730 * var(--base-width) / 1280);
    width: calc(80 * var(--base-width) / 1280);
    height: calc(80 * var(--base-width) / 1280);
}

#index #box02 .neutron-absorber-hit {
    top: calc(130 * var(--base-width) / 1280);
    left: calc(80 * var(--base-width) / 1280);
    width: calc(300 * var(--base-width) / 1280);
    height: calc(130 * var(--base-width) / 1280);
    transform: rotate(-30deg);
}

#index #box02 .food-life-hit {
    top: calc(510 * var(--base-width) / 1280);
    left: calc(420 * var(--base-width) / 1280);
    width: calc(150 * var(--base-width) / 1280);
    height: calc(120 * var(--base-width) / 1280);
}

/* --- 吹き出し（fukidashi） --- */
#index #box02 .illust .fukidashi.railway {
    top: calc(278 * var(--base-width) / 1280);
    left: calc(264.5 * var(--base-width) / 1280);
}

#index #box02 .illust .fukidashi.truck {
    top: calc(547 * var(--base-width) / 1280);
    left: calc(888 * var(--base-width) / 1280);
}

#index #box02 .illust .fukidashi.developed-alloy {
    top: calc(190 * var(--base-width) / 1280);
    left: calc(920 * var(--base-width) / 1280);
}

#index #box02 .illust .fukidashi.heatsink {
    top: calc(13 * var(--base-width) / 1280);
    left: calc(885 * var(--base-width) / 1280);
}

#index #box02 .illust .fukidashi.telecommunication {
    top: calc(80 * var(--base-width) / 1280);
    left: calc(462 * var(--base-width) / 1280);
}

#index #box02 .illust .fukidashi.architecture {
    top: calc(383 * var(--base-width) / 1280);
    left: calc(710 * var(--base-width) / 1280);
}

#index #box02 .illust .fukidashi.neutron-absorber {
    top: calc(19 * var(--base-width) / 1280);
    left: calc(167.5 * var(--base-width) / 1280);
}

#index #box02 .illust .fukidashi.food-life {
    top: calc(396 * var(--base-width) / 1280);
    left: calc(447 * var(--base-width) / 1280);
}

#index .menuBl .inner > div span{
    font-size: 1.8rem;
}

#index .modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
}

#index .modal.is-active {
    display: block;
}

#index .modal__bg {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.65);
}

#index .modal__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    max-width: 90%;
    background: #fff;
    z-index: 1;
    overflow: hidden;
}

#index .modal__content .js-close-modal{
    position: absolute;
    width: 30px;
    height: 30px;
    background: #fff;
    border-radius: 15px;
    border: none;    
    color:#dc186e;
    top: 10px;
    right: 10px;
    padding: 0;
    font-size: 2.3rem;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid #fff;
    transition: all 0.5s ease 0s;
}

#index .modal__content .js-close-modal:hover{
    background: #dc186e;
    color:#fff;
}

#index .modal__content .cateTit{
    text-align: center;
    color: #fff;
    font-size: 2.0rem;
    padding: 15px;
    background: #dc186e;
}

#index .modal__content .modal__thumb{
    border-radius: 8px;
    overflow: hidden;
    margin: 33px 35px 28px;
}

#index .modal__content ul{
    display: flex;
    flex-direction: column;
    gap:8px;
    margin: 35px;
}

#index .modal__content ul li a{
    display: block;
    width: 100%;
    text-align: center;
    border: 2px solid #dc186e;
    border-radius: 25px;
    line-height: 1.25;
    height: 46px;
    font-size: 1.8rem;
    transition: all 0.5s ease 0s;
    display: flex;
    align-items: center;
    justify-content: center;
}

#index .modal__content ul li a:hover{
    border: 2px solid #dc186e;
    background: #dc186e;
    color: #fff;
}

@media only screen and (max-width:767px) {
    #index #box01 .bgPinkArea{
        padding: calc(40vw / 7.5) calc(40vw / 7.5);
        margin-bottom: calc(40vw / 7.5);
    }        
    
    #index #box01 .bgPinkArea .column02 .btn a{
        width:  calc(300vw / 7.5);
    }

    #index #box02{
        margin-top: calc(100vw / 7.5);
    }
    
    #index #box02 .illust .fukidashi {
        position: absolute;
        /* スマホはアニメーションなし、定位置・定サイズ */
        transform: scale(1) !important; 
        animation: none !important;
    }

    #index #box02 .illust .fukidashi img {
        /* 吹き出しからピン画像へ差し替え */
        content: url("../img/product/index_illust_pin.png");
        width: calc(62vw / 7.5);
        height: calc(79vw / 7.5);
    }    
    
    #index #box02 .illust .fukidashi.railway{
        top:calc(500vw / 7.5);
        left:calc(158vw / 7.5);
    }

    #index #box02 .illust .fukidashi.truck{
        top:calc(1107vw / 7.5);
        left:calc(338vw / 7.5);
    }

    #index #box02 .illust .fukidashi.developed-alloy{
        top:calc(640vw / 7.5);
        left:calc(530vw / 7.5);
    }

    #index #box02 .illust .fukidashi.heatsink{
        top:calc(333vw / 7.5);
        left:calc(540vw / 7.5); 
    }

    #index #box02 .illust .fukidashi.telecommunication{
        top:calc(160vw / 7.5);
        left:calc(535vw / 7.5);    
    }

    #index #box02 .illust .fukidashi.architecture{
        top:calc(830vw / 7.5);
        left:calc(350vw / 7.5);       
    }

    #index #box02 .illust .fukidashi.neutron-absorber{
        top:calc(145vw / 7.5);
        left:calc( 222vw / 7.5);    
    }

    #index #box02 .illust .fukidashi.food-life{
        top:calc(747vw / 7.5);
        left:calc(180vw / 7.5);    
    }

    #index #box02 .railway-hit {
        top: calc(560vw / 7.5);
        left: calc(24vw / 7.5);
        width: calc(340vw / 7.5);
        height: calc(37vw / 7.5);
    }

    #index #box02 .truck-hit {
        transform: rotate(35deg);
        top: calc(1150vw / 7.5);
        left: calc(280vw / 7.5);
        width: calc(130vw / 7.5);
        height: calc(70vw / 7.5);
    }

    #index #box02 .developed-alloy-hit1 {
        top: calc(690vw / 7.5);
        left: calc(460vw / 7.5);
        width: calc(200vw / 7.5);
        height: calc(140vw / 7.5);
    }

    #index #box02 .developed-alloy-hit2 {
        top: calc(620vw / 7.5);
        left: calc(600vw / 7.5);
        width: calc(140vw / 7.5);
        height: calc(140vw / 7.5);
    }

    #index #box02 .heatsink-hit{
        top: calc(385vw / 7.5);
        left: calc(420vw / 7.5);
        width: calc(340vw / 7.5);
        height: calc(35vw / 7.5);
        transform: rotate(-30deg);
    }

    #index #box02 .telecommunication-hit1{
        top: calc(210vw / 7.5);
        left: calc(480vw / 7.5);
        width: calc(180vw / 7.5);
        height: calc(120vw / 7.5);
    }

    #index #box02 .telecommunication-hit2{
        top: calc(170vw / 7.5);
        left: inherit;
        right: 0;
        width: calc(120vw / 7.5);
        height: calc(130vw / 7.5);
    }

    #index #box02 .architecture-hit{
        top: calc(885vw / 7.5);
        left: calc(325vw / 7.5);
        width: calc(90vw / 7.5);
        height: calc(90vw / 7.5);
    }

    #index #box02 .neutron-absorber-hit{
        top: calc(190vw / 7.5);
        left: calc(80vw / 7.5);
        width: calc(300vw / 7.5);
        height: calc(130vw / 7.5);
        transform: rotate(-30deg);    
    }

    #index #box02 .food-life-hit{
        top: calc(783vw / 7.5);
        left: calc(80vw / 7.5);
        width: calc(160vw / 7.5);
        height: calc(120vw / 7.5);    
    }
    
    #index .menuBl .inner > div span{
        font-size:calc(28vw / 7.5);
    }
    
    #index .modal__content .js-close-modal{
        width: calc(50vw / 7.5);
        height: calc(50vw / 7.5);
        top: calc(10vw / 7.5);
        right: calc(15vw / 7.5);
        font-size: calc(30vw / 7.5);
        border-radius: calc(25vw / 7.5);
    }

    #index .modal__content .cateTit{
        font-size:calc(30vw / 7.5);
        padding: calc(20vw / 7.5);
    }
    
    #index .modal__content .modal__thumb{
        border-radius: 8px;
        width: calc(512vw / 7.5);
        margin: calc(53vw / 7.5) auto calc(60vw / 7.5);
        display: block;
        overflow: hidden;
    }
    
    #index .modal__content{
        width: calc(620vw / 7.5);
    }

    #index .modal__content ul{
        width: calc(512vw / 7.5);
        gap:calc(15vw / 7.5);
        margin: calc(40vw / 7.5) auto calc(80vw / 7.5);
    }

    #index .modal__content ul li a{
        height: calc(80vw / 7.5);
        border-radius: calc(46vw / 7.5);
        font-size: calc(26vw / 7.5);
    }
    
        
    #index .menuBl .inner ul li + li{
        margin-top: .7em;
    }       
        
    #index .menuBl .inner a.pdf:after{
        width:calc(24vw / 7.5);
        height: calc(31vw / 7.5);
        bottom: -3px;
        position: relative;
    }    
    
}


/*nikkei-aluminum-conveyor*/
#nikkei-aluminum-conveyor .column02 .ls-1{
    letter-spacing: -.1em;
}

@media only screen and (max-width:767px) {
    #nikkei-aluminum-conveyor .column02{
        gap: calc(60vw / 7.5) 0;
    }

    #nikkei-aluminum-conveyor .column02 .column02{
        flex-direction: row;
    }

    #nikkei-aluminum-conveyor .column02 .column02 > *{
        width: 48.780487804%;
    }
    
}
    

/*nikkei-fuel-tank*/
#nikkei-fuel-tank #faqBl .img{
    margin: 10px auto;
    max-width: initial;
    text-align: center;
}

#nikkei-fuel-tank #faqBl .img img{
    max-width: 321.5px;
}

@media only screen and (max-width:767px) {
    #nikkei-fuel-tank #faqBl img{
        width: 80%;
    }    
    
}
    


/*nmanufacturable-range*/
#manufacturable-range #box01 p{
    text-align: center;
}

#manufacturable-range #box01 p span{
    color:#e0327e ;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 70px;
}

@media only screen and (max-width:767px) {
#manufacturable-range #box01 p span{
    font-size: calc(100vw / 7.5);
}
    
}