/*
General Style Start
*/
:root{
    --text-size: 16px;  
    --large_text: clamp(16px, 2vw, 36px); 
    --medium_text: clamp(12px, 1.8vw, 30px) ; 
    --text_color: #000000; 
    --color_default: #e8473f ; 
    --color_white: #fff; 
    --footer_text_color: #333333; 
}

@font-face {
    font-family: 'Shippori Gothic B2';
    src: url('fonts/ShipporiGothicB2-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

/* Example usage */
 
html, body {
    font-family: 'Shippori Gothic B2', sans-serif;
    scroll-behavior: smooth;
    margin: 0; 
    padding: 0; 
    max-width: 100%; 
}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0; 
}
body{  
    font-size: 16px;
    max-width: 100%; 
    overflow-x: hidden;
} 
#main_content {
    max-width: 780px; 
    width: 100%; 
    position: relative; 
    z-index: 1;
    background-color: #fff;
}
img{
    max-width: 100%; 
}
.d-block{
    display: block; 
}
/* animations */

@keyframes shakingMotionRight {
    0% { 
        transform: rotate(0deg);
    }
    40% { 
        transform: rotate(0deg);
    }
    50% { 
        transform: rotate(2deg);
    }
    60% { 
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
  }
  @keyframes shakingMotionLeft {
      0% { 
          transform: rotate(0deg);
      }

      40% { 
            transform: rotate(0deg);
        }
        50% { 
            transform: rotate(-1deg);
        }
        60% { 
            transform: rotate(0deg);
        }
      100% {
          transform: rotate(0deg);
      }
    }
  

@-webkit-keyframes gradient_motion {
    0% {
      -webkit-filter: hue-rotate(0deg);
      filter: hue-rotate(0deg);
    }
    100% {
      -webkit-filter: hue-rotate(90deg);
      filter: hue-rotate(90deg);
    }
  }
  
  @keyframes gradient_motion {
    0% {
      -webkit-filter: hue-rotate(0deg);
      filter: hue-rotate(0deg);
    }
    100% {
      -webkit-filter: hue-rotate(360deg);
      filter: hue-rotate(360deg);
    }
  }
  
@keyframes rotate360 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
} 
@keyframes scrollBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(20px);
    }
}
 
/* animations end*/
.shaking_motion_right {
    animation: shakingMotionRight 3s infinite; 
}
.shaking_motion_left {
    animation: shakingMotionLeft 3s infinite; 
}
.p_relative{
    position: relative; 
}
.p_absolute{
    position: absolute; 
}
.top {
    top: 0; 
}
.top-20{
    top: 20px; 
}
.top-90 {
    top: 90px; 
}
.left{
    left: 0; 
}
.right{
    right: 0; 
}
.bottom{
    bottom: 0; 
}
.w-100{
    width: 100%; 
}
.text-center{
    text-align: center; 
}
.text-right{
    text-align: right ; 
} 
.d_inline_block {
    display: inline-block; 
} 

.js-border {
-webkit-clip-path: inset(0 100% 0 0);
        clip-path: inset(0 100% 0 0);
transition: 0.8s ease;
}
.js-border.is-active {
-webkit-clip-path: inset(0);
        clip-path: inset(0);
}

.js-fadeIn {
opacity: 0;
-ms-transform: translateY(10px);
    transform: translateY(10px); 
transition: 0.8s ease;
}
.js-fadeIn.is-active {
opacity: 1;
-ms-transform: translateY(0);
    transform: translateY(0); 
}

.js-ttl-bg {
-webkit-clip-path: inset(0 100% 0 0);
        clip-path: inset(0 100% 0 0);
transition: 0.6s ease;
}

.js-ttl-bg.is-active {
-webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0);
}
.bg-video-container{ 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    object-fit: cover; 
}

/*
General Style End
*/

#mainContent {
    background-color: #fff;
    position: relative;
    z-index: 1;
    max-width: 778px;
    margin-right: 100px;
    margin-left: auto;
}
.main_background {
    background:  url(./images/main-bg.jpg);
    position: fixed; 
    height: 100vh;  
    width: 100%; 
    left: 0; 
    top: 0; 
    z-index: -1;
    /* --- 繰り返し --- */
  background-repeat: no-repeat; /* これが最も重要です！リピートを防ぎます */
  /* --- サイズ調整 --- */
  background-size: cover; /* 画像の縦横比を保ったまま、要素全体を覆うように拡大・縮小 */

  /* --- 位置調整 --- */
  background-position: center center; /* 画像を中央に配置 */
    
}
.content_area {
    display: grid; 
    grid-template-columns: 1fr ; 
    max-width: 100%;
    width: 100%;  
    margin-left: auto; 
    margin-right: auto; 
}

.pc_content{
    min-height: 100vh;  
    display: flex;  
    padding: 0; 
    flex-direction: column; 
    justify-content: center;
    position: sticky; 
    top: 0; 
    left: 0; 
}
.pc_product_image {
    margin-left: 5%; 
}
.section_action {
    background : #c70013e3; 
    padding: 50px 0; 
    margin-left: 0;
} 
.section_action img {
    max-width: 70%; 
}


.footer {
    padding: 50px 20px; 
    text-align: center; 
    color: var(--footer_text_color);
    font-size: clamp(12px, 1.4vw, 24px); 
}
.footer nav ul{
    list-style: none; 
    display: flex; 
    flex-direction: column; 
    gap: 35px; 
    margin-bottom: 25px; 

}

.footer nav ul a {
    color: var(--footer_text_color); 
    text-decoration: none;
}
 
.section_1,
.section_2, 
.section_3 {
    position: relative; 
    z-index: 3 ;
    background-color: #ffffff;
}

@media all and (max-width: 550px){
    .section_action { 
        padding: 30px 0; 
    }
}

@media all and (min-width: 1025px){

    .section_action {
        background : #c70013 !important;  
    } 
    .sm{
        display: none !important; 
    }
    .content_area { 
        max-width: 95%; 
        grid-template-columns: 1fr 1fr;  
    }

    #mainContent {  
        margin-left: 0; 
        margin-right: auto;  
        max-width: 512px;
    }

}
@media all and (max-width: 1024px){
    .pc{
        display: none !important; 
    }

    #mainContent { 
        width: 100%; 
        max-width: 778px; 
        margin-left: auto; 
        margin-right: auto; 
    }

    .section_action.action_section_1{
        display: none; 
    }
    .section_action:not(.action_section_1){
        position: sticky; 
        bottom: 0; 
        left: 0;
    }
}


@media all and (min-width: 1225px) and (max-width: 1500px){
    #mainContent { 
        margin-right: 70px; 
    }
    .content_area { 
        grid-template-columns: 1fr 1fr;  
    }
    .pc_content, 
    .main_background {  
        height: 100vh; 
    }
    .pc_content a img {
        max-width: 30%; 
    }
    .pc_product_image { 
        max-width: 40%;
    }
}
@media all and (min-width: 1025px) and (max-width: 1224px){
    #mainContent { 
        margin-right: 60px; 
    }
    .content_area { 
        grid-template-columns: 1fr 1fr;  
    }
    .pc_content, 
    .main_background {  
        height: 100vh; 
    }
    .pc_product_image { 
        max-width: 40%;
    }
    .pc_content a img {
        max-width: 30%; 
    }
}
@media all and (max-width: 750px){
    .main_background {
        display: none; 
    }
}