@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');
/*------------------------------------ reset ------------------------------------ */
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var, b, i,dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, dialog, figure, footer, header,hgroup, menu, nav, section,time, mark, audio, video { list-style:none; margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
body { line-height:1;}
article, aside, dialog, figure, footer, header,hgroup, nav, section { display:block;}
nav ul { list-style:none;}
li { margin:0; padding:0;}
blockquote, q { quotes:none;}
blockquote:before, blockquote:after,q:before, q:after { content:''; content:none;}
a { margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline; background:transparent;}
ins { background-color:#ff9; color:#4a4a4a; text-decoration:none;}
mark { background-color:#ff9; color:#4a4a4a; font-style:italic; font-weight:bold;}
del { text-decoration: line-through;}
abbr[title], dfn[title] { border-bottom:1px dotted #4a4a4a; cursor:help;}
table { border-collapse:collapse; border-spacing:0;}
hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0;}
th,td{vertical-align: top;}
html { font-size:15px; -webkit-text-size-adjust: 100%;overflow:auto; }
body {min-width: 1000px;font-family:"游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium",'Noto Sans JP', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;font-weight: 400;font-size: 15px;line-height: 1.8;color: #4a4a4a;margin:0 auto;overflow: hidden; position:relative;z-index:1;overflow-x:hidden;visibilty:hidden;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased; background-color: #fff;scroll-behavior: smooth;}
body * {box-sizing: border-box;}
.ja {font-family: 'Noto Serif JP';}
.en {font-family: 'Montserrat';letter-spacing: normal;}
strong {font-weight:900;}
@media only screen and (max-width:1000px) {body { min-width: initial;}}
@media only screen and (max-width:800px) {main {background:none;}}
@media only screen and (max-width:440px) {body {font-size: 3.65vw;font-weight: normal;}}
a { color: #282e30; text-decoration: none; }
*:focus { outline: none;} 
ul {list-style: none; }
img {max-width:100%;vertical-align: bottom;}
.inner {max-width: 100%;margin:0 auto;position: relative;}
@media only screen and (max-width:1180px) {.inner {max-width:initial;width: 100%;}}
/*------------------------------------ END reset ------------------------------------ */
/*------------------------------------ 共通 ------------------------------------ */
body,span {font-family:"Zen Kaku Gothic New", sans-serif;font-feature-settings :"palt" on;color:#333;width:100%;margin:0 auto;box-sizing: border-box;font-size:17px;font-weight: 400;}
body a{text-decoration: none; transition: .2s;color: inherit;overflow-x: hidden;}
table,th,td {font-family:"Zen Kaku Gothic New",sans-serif;}
td{font-weight: 500;}
img{max-width: 100%;}
a{display: block;}
p{line-height: 2;}
.sp { display:none; }
.pc{display: block;}
.flex {display: -webkit-box;display: -moz-box;display: -webkit-flex;display: box;display: flex;justify-content: space-between;flex-wrap: wrap;}
.nowrap{flex-wrap: nowrap;}
.tx_white{color: #fff;}/*テキスト白*/
.pc{display: block;}
.sp{display: none;}
.wrap{max-width: 1300px;margin:0 auto;}
/*タイトル*/
.title1 img{height: 40px;width: auto;display: block;}/*ご購入はこちら等1行*/
.title2 img{height: 80px;width: auto;display: block;}/*アーテミス史上…2行*/
.title3 img{height: 25px;width: auto;display: block;}/*メイン商品一覧*/
.title4 img{height: 100px;width: auto;display: block;}/*商品一覧こんなワンちゃんに……2行*/
.anc_space{margin-top: -150px;padding-top: 150px;}
/*文字サイズ*/
.font_40b{font-size: clamp(25px, 1.8vw, 40px);font-weight: 800;line-height: 1.5;padding-bottom: 30px;}
.font_b{font-weight: 700;font-size: 1.03em;}
/*---------ホバーアクション---------*/
/*拡大1*/
.hov1 li{transition-duration: .4s;}
.hov1 li:hover{transform: scale(1.1);}
/*半透明*/
.hov2 li{transition-duration:.4s;}
.hov2 li:hover{opacity: .5;}
/*-----------------動く罫線のCSS-----------------*/
/*共通設定*/
.scroll-line {background-color: #000; /* デフォルトの色 */transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);}
/*1. 横線のスタイル (Horizontal)*/
.line-horizontal {width: 100%;height: 2px;transform: scaleX(0);transform-origin: left center; /* デフォルト：左から右へ */}
    /* 横線の起点バリエーション */
    .line-horizontal.origin-right { transform-origin: right center; }  /* 右から左 */
    .line-horizontal.origin-center { transform-origin: center center; } /* 中央から左右 */
    /* 横線の発動クラス */
    .line-horizontal.is-active {transform: scaleX(1);}

/*2. 縦線のスタイル (Vertical)*/
    .border-wrapper {position: relative;}
    .line-vertical {position: absolute;top: 0;width: 2px;height: 100%;transform: scaleY(0);transform-origin: top center; /* デフォルト：上から下へ */}

    /* 縦線の起点バリエーション */
    .border-wrapper.spaceleft{padding-left: 30px;}/* 縦線の左側に余白を空ける */
    .border-wrapper.spaceright{padding-right: 30px;}/* 縦線の右側に余白を空ける */
    .line-vertical.origin-bottom { transform-origin: bottom center; } /* 下から上 */
    .line-vertical.origin-center { transform-origin: center center; } /* 中央から上下 */
    .line-vertical.origin-left {left: 0;} /*左に */
    .line-vertical.origin-right {right: 0;} /* 右に */

    /* 縦線の発動クラス */
    .line-vertical.is-active {transform: scaleY(1);}

 /*共通のマージン*/   
/*padding-top: 75px;*/
.m3-1wrap .left img,.pr1-img,.m3-1wrap .right,.pr1-1 .right,.m3-2wrap,.m3-2-3 li{padding-top: 75px;}
/*padding-bottom: 75px;*/
.m3-2-1 .right,.m3-2-1 .left,.m3-2-3 li,.pr1-2 li{padding-bottom: 75px;}
/*padding top bottom 75px*/
.pr2_3,.pr2_1,.pr2_2 .left,.pr2_2 .right,.pr3{padding-bottom: 75px;padding-top: 75px;}
/*-----------------END 動く罫線のCSS-----------------*/

/*------------------------------------ END 共通 ------------------------------------ */

/*---------------------------------ローディング---------------------------------*/
.loader {position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background-color: #111111; /* 背景の単色（お好みで変更可能） */display: flex;justify-content: center;align-items: center;z-index: 99999; /* 最前面に表示 */
/* 消えるときの滑らかなアニメーション設定 */ transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.8s ease;}
/* ロゴのスタイルと登場時のふわっとしたアニメーション */
.loader-content {text-align: center;}
.loader-logo {animation: pulseLogo 1.5s infinite alternate;}
/* ロゴが軽く呼吸するように明滅するアニメーション */
@keyframes pulseLogo {
    0% { opacity: 0.4; }
    100% { opacity: 1; }
}
.loader.is-loaded {transform: translateY(-100%); /* 上へ画面外にスライドアウト */opacity: 0;pointer-events: none; /* 消えた後にクリックを邪魔しないようにする */}
/*---------------------------------ローディング---------------------------------*/


/*------------------------------------ header.html --------------------------------- */
.menu{background:#343434;padding: 20px 0;}
.menu .wrap.flex{align-items: center;}
.pc_nav{font-size: 17px;}
.logo{width:15%;}
.pc_nav{width: 75%;}
.logo img {max-width:150px;}
.menu.pc{position: fixed;width: 100%;z-index: 9999;}
.m1_top{padding-top: 85px;}
/*spメニュー*/
.menu-btn {position: fixed;top: 8px;right: 20px;width: 60px;height: 60px;border: none;background: none;cursor: pointer;z-index: 1001;display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 6px;}
.menu-btn span {display: block;width: 24px;height: 2px;background: #fff;transition: 0.4s ease;}
.menu-btn.active span:nth-child(1) {transform: translateY(8px) rotate(45deg);}
.menu-btn.active span:nth-child(2) {opacity: 0;}
.menu-btn.active span:nth-child(3) {transform: translateY(-8px) rotate(-45deg);}

.menu-overlay {position: fixed;inset: 0;background: rgba(0, 0, 0, 0.5);opacity: 0;visibility: hidden;transition: opacity 0.4s ease;z-index: 999;}
.menu-overlay.active {opacity: 1;visibility: visible;}
.menu-panel {position: fixed;top: 0;right: 0;width: 100vw;max-width: 90vw;height: 100vh;background: #fff;transform: translateX(100%);transition:transform 0.5s cubic-bezier(.77, 0, .18, 1);z-index: 1000;overflow-y: auto;}
.menu-panel.active {transform: translateX(0);}

.menu-inner {padding: 120px 60px 60px;}
.menu-label {margin: 0 0 50px;font-size: 12px;letter-spacing: 0.2em;background: #333;padding: 20px 0;}

.menu-list {margin: 0;padding: 0;list-style: none;}
.menu-list li {border-bottom: 1px solid #ddd;}
.menu-list a {display: block;padding: 25px 0;color: #111;text-decoration: none;font-size: 20px;font-weight: 600;letter-spacing: 0.08em;transition: opacity 0.3s ease;}
.menu-list a:hover {opacity: 0.5;}
body.menu-open {overflow: hidden;}
.sp_menu{background:#343434;padding-top: clamp(10px, 5vw, 25px);padding-bottom: clamp(10px, 5vw, 25px);}

/*------------------------------------END  header.html ----------------------------------- */
/*------------------------------------footer.html ----------------------------------- */
/*オンラインストア*/
.footer .title1 img{margin: 0 auto 30px;}
.onlinestore{padding: 150px 0 30px 0;background: url(/img/dot.png)right bottom no-repeat;background-size:contain;}
.onlinestore li{width: 31%;border: 1px #ccc solid;text-align: center;/*border-radius: 999px;*/background: #fff;margin-bottom: 20px;}
.onlinestore li img{height: 30px;}
.onlinestore li:nth-of-type(4) img{height: 15px;position: relative;top: -6px;}
.onlinestore li a{padding: 15px;}
.onlinestore ul::after{content: "";width: 31%;}
/*フッターナビ*/
.f_nav{background: #343434;padding: 50px 0 30px;}
.f_nav .logo{margin:0 auto;padding-bottom: 45px;}
.f_navlist,.f_navbrands{margin-bottom: 45px;}
.f_navbrands li{width: 23%;}
.f_navlist{justify-content: space-around;}
.copy{font-size:13px;text-align: center;}
/*追随バナー*/
.follow-banner {position: fixed;bottom:10px;right: 0;z-index: 99;}
.follow-banner picture {display: block;width: 100%;max-width:180px;height: auto;margin-left: auto;margin-right: 1vw;filter: drop-shadow(5px 0 5pxpx rgba(255, 255, 255, 0.7));position: relative;}
/* 閉じるボタン */
.banner-close {position: absolute;width: 30px;height: 30px;right:5px; top:-8%; border:1px solid #ccc;border-radius: 50%;background: #fff;color: #333;font-size: 22px;line-height: 1;cursor: pointer;z-index:100;}
/*------------------------------------END  footer.html ----------------------------------- */

/*------------------------------------index.html ----------------------------------- */
/*section main1*/
.mv_left{width: 68%;}
.mv_right{width: 32%;}
.mv_left .artemis_logo{width: 300px;margin: 0 auto 20px;}
.mv_left .hit_logo{width: 380px;margin-bottom: 20px;}
.mv_center{display: flex;width: 100%;height: 100%;justify-content: center;align-items: center;}
.mv_center_item{text-align: center;}
.mv_text {font-weight: 500;}
.mv_title_left{background: url(/img/dot.png)right bottom no-repeat;background-size: cover;background-color: #000;width: 20%;}
.mv_title_right{width: 80%;}
.mv_title_left,.mv_title_right{padding-top:50px;padding-bottom:50px;}
.mv_title_left p{font-size: 35px;font-weight: 700;text-align: center;line-height: 1.2;}
/*section main2*/
.main_pac{flex-wrap: nowrap;}
.main_pac li{width: 50%;padding-top: 120px;padding-bottom: 30px;}

/*ぷかぷか浮く商品*/
.ch_left{background: url(/img/s2_chikentitle.svg) no-repeat 30px -5px;background-color:#e2007e;background-size: 47%;display: block;}
.fs_right{background: url(/img/s2_fishtitle.svg) no-repeat 45px 20px;background-color:#00a2eb;background-size: 27%;}
/* ---親要素：1枚のアートボード（縦横比を固定）---- */
.flat_wrap {position: relative;width: 100%;max-width: 600px; /* デザイン上の最大幅（お好みのサイズに調整してください） */
  aspect-ratio: 1 / 1; /* 正方形にする場合（横幅に対して高さを同じ割合に保つ） */
  margin: 0 auto;display: flex;justify-content: center;align-items: center;margin-top: 40px;}

/* ---アニメーション定義----- */
@keyframes floatProduct {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-25px); }
}

@keyframes shadowScale {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(0.7); opacity: 0.15; }
}

@keyframes floatDecorationA {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(4deg); }
}

@keyframes floatDecorationB {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(-3deg); }
}

/* ----1. 真ん中のメイン商品（パッケージ）---- */
.float_item1 {position: relative;z-index: 2;width: 53%; /* 親要素に対する横幅の比率 */animation: floatProduct 2.5s ease-in-out infinite;}
/* imgタグのwidth:250pxなどの直書き対策 & 拡大縮小の自動化 */
.float_item1 img {width: 100%;height: auto;display: block;}
/* ---2. 足元の影（商品幅と連動させる）--- */
.float_shadow {position: absolute;left: auto;bottom: 8%; /* 下からの相対位置 */width: 35%;  /* 商品幅(45%)より少し小ぶりに設定 */height: 4%;  /* 高さも比率指定 */background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 80%);border-radius: 50%;z-index: 1;animation: shadowScale 4s ease-in-out infinite;}

/* ---3. あしらい（位置とサイズをすべて % で管理）--- */
/* 共通設定：中のimgは親divの幅一杯（100%）に広げる */
.float_ch2 img,.float_ch3 img,.float_ch4 img {width: 100%;height: auto;display: block;}
/* あしらい1: 鶏肉（右上） */
.float_ch2 {position: absolute;top: -5%;right: -5px;width: 35%; /* 親要素の幅に対する割合 */z-index: 3;animation: floatDecorationA 3.2s ease-in-out infinite;}
/* あしらい2: ほうれん草（左上〜中央寄り） */
.float_ch3 {position: absolute;top: 26%;left: -12%;width: 40%; /* 親要素の幅に対する割合 */z-index: 3;animation: floatDecorationA 2.8s ease-in-out infinite;animation-delay: -1s;}
/* あしらい3: クランベリー（右下） */
.float_ch4 {position: absolute;bottom: 9%;right: 2%;width: 42%; /* 親要素の幅に対する割合 */z-index: 3;animation: floatDecorationB 3.6s ease-in-out infinite;animation-delay: -0.5s;}

/*フィッシュ*/
/* あしらい1: サーモン */
.float_fs2 {position: absolute;top: -5%;right: -10px;width: 35%; /* 親要素の幅に対する割合 */z-index: 3;animation: floatDecorationA 3.2s ease-in-out infinite;}
/* あしらい2: ブルーベリー1*/
.float_fs3 {position: absolute;top: 26%;left: -2%;width: 40%; /* 親要素の幅に対する割合 */z-index: 3;animation: floatDecorationB 2.8s ease-in-out infinite;animation-delay: -1s;}
/* あしらい3: ブルーベリー2*/
.float_fs4 {position: absolute;bottom: 46%;right: -23%;width: 42%; /* 親要素の幅に対する割合 */z-index: 3;animation: floatDecorationA 3.6s ease-in-out infinite;animation-delay: -0.5s;}
/* あしらい4: ココナッツ*/
.float_fs5 {position: absolute;bottom: 0;right: -3%;width: 42%; /* 親要素の幅に対する割合 */z-index: 3;animation: floatDecorationB 3.6s ease-in-out infinite;animation-delay: -0.5s;}
/*下数字*/
.m2_list{max-width: 80%;margin: 0 auto;}
.m2_list li{padding: 0;}
.m2_list1{align-items: end;}
.m2_list1 .tx_main{font-size: clamp(15px, 1.7vw, 40px);}
.m2_list1 .tx_sub{font-size: clamp(15px, 1vw, 30px);}
.m2_list1 li{width: 48%;}
.m2_list2 li{width: 24%;border-right:1px solid #fff;padding: 0 17px;margin-top: 15px;text-align: center;}
.m2_list2 p {font-size: clamp(5px, 1vw, 20px);font-weight: 500;margin-bottom: 10px;}
.m2_list2.m2_list2-2 li {width: 16%;padding: 0 2%;}
.m2_list2-2 p{line-height: 1.1;letter-spacing: -0.1em;}
.m2_list2-2{align-items: end;}
.m2_list2 img{height: clamp(15px, 3vw, 50px);}

/*section main3*/
/*main3-1*/
.m3-1wrap .left,.pr1-1 .left{width: 60%;position: relative;}
.m3-1wrap .right,.pr1-1 .right{width: 40%;}
.m3-1wrap .scroll-line{width: 2px;height: 100%;}
.kodawari,.osusume{width: 90%;margin: 0 auto;max-width: 800px;margin-bottom: 75px;}
.kodawari2{width: 50%;margin: 0 auto;}
.kodawari2 img{width:clamp(200px, 50vw, 300px) ;}
.kodawari p{font-size: 20px;font-weight: 500;line-height: 1.3;margin-top: 21px;}
.kodawari p:last-child img {height:60px;width:auto;display: block;padding-top: 0;}
.kodawari2 ul{margin-top: 30px;font-size: clamp(15px, 2vw, 21px);font-weight: 600;}
.kodawari2 ul li{margin-bottom: 20px;}
.kodawari2 .scroll-line{height: 1px;width: 100%;margin-top: 10px;}
/*main3-2*/
.m3-2-1 .right,.m3-2-1 .left{width: 50%;}

.m3-2-1 .right p{width: 90%;text-align: justify;}
.m3-2num{font-size: 15px;text-align: end!important;font-weight: 700;margin-top: auto;}
.m3-2num::after{content: "";display: inline-block;width: 50px;height: 50px;background-size: contain;background-repeat: no-repeat;background-position: center;margin-left: 11px;vertical-align: text-bottom;bottom: -6px;position: relative;}
.m3-2num.num1::after{background-image: url('/img/01.svg');}
.m3-2num.num2::after{background-image: url('/img/02.svg');}
.m3-2num.num3::after{background-image: url('/img/03.svg');}
.m3-2num.num4::after{background-image: url('/img/04.svg');}
.m3-2num.num5::after{background-image: url('/img/05.svg');}
.m3-2num.num6::after{background-image: url('/img/06.svg');}
.m3-2num.num7::after{background-image: url('/img/07.svg');}
.m3-2wrap .col{display: flex;flex-direction: column; /* s縦並びにする */}
.m3-2wrap .col img{margin-bottom: 30px;margin-right: auto;}
.m3-2-1 .left img{max-width: 75%;padding-bottom: 30px;}
.m3-2-2 li,.pr1-2 li{width: 33%;position: relative;}
.m3-2-2 .line-vertical{height:100%;width: 2px;position: absolute;top: 0;right: 0;}
.m3-2-2 .col img{margin-top: 75px;}
.m3-2-2 .col p,.pr1-2 li p{width: 80%;text-align: justify;margin: 0 auto;}
.m3-2-2 .col .m3-2num{margin-top: auto;padding: 30px 0 75px 0;}
.m3-2-2 .title2,.pr1-2 li h2{width: 80%;margin: 0 auto;}
.m3-2-3 li{width: 50%;}
.m3-2-3 .left p{width: 90%;text-align: justify;}
.m3-2-3 .right img{max-width: 75%;}
.m3-2-3 .right{text-align: end;}
.m3-2_cont{padding: 75px 0;}
.m3-2_cont img{margin-bottom: 30px;}
.m3-2-4_tx{width: 95%;}
.main4 li{position: relative;}
.main4 .title3{padding: 30px 0;margin-bottom: 30px;}
.main4 .left,.main4 .right{width: 50%;}
.main4 .line-vertical{height:100%;width: 2px;position: absolute;top: 0;right: 0;}
.m4_num{position: relative;}
.m4_num .line-horizontal{height:2px;position: absolute;}
.m4_num .line-horizontal.m4_1{top: 29%;right: 0;width: 61%;}
.m4_num .line-horizontal.m4_2{bottom: 0;right: 0;width:100%;}
.m4_num .title2 img{display: inline;}
.left .m4_num .title2 img{padding-right: 5.3em;}
.right .m4_num  .title2 img{padding-right: 3em;}
.m4_num .title2{font-weight: 700;font-size: 22px;padding-bottom: 13px;}
.main4 .flex.nowrap{justify-content: flex-start;}
.main4 .m4_title{width: 50%;}
 .main4 .m4_pk{width: 42%;}
.m4_pk img{width: clamp(200px, 16vw, 250px);}
.right .m4_title{width: 50%;}
.right .m4_title p,.right .m4_num .title2 img,.right .m4_num_tx,.right .m4_button {padding-left: clamp(15px, 4.5vw, 50px);}
.m4_title p,.m4_title span {font-size: clamp(20px, 4.2vw, 60px);font-weight: 800;line-height: 1;}
.m4_title .sub{font-size: 25px;font-weight: 400;margin-bottom: 15px;display: inline-block;}
.m4_title .m4_chi{color: #e2007e;display:inline-block;}
.m4_title .m4_fs{color: #00a2eb;display:inline-block;letter-spacing: clamp(-12px, -1vw, -2px);}
.m4_pk{text-align: center;}
.main4 .right .title3{padding-left: clamp(15px, 4vw, 30px);}
.main4 .title3{position: relative;}
.main4 .title3::after,.pr2_ch .name::after{content: "";display: inline-block;background-image: url('/img/smallbites.png');width: 75px;height: 75px;background-size: contain;background-repeat: no-repeat;background-position: center;margin-left: 11px;vertical-align: text-bottom;bottom:0;left: 14em;position: absolute;}
.main4 .title3::before {content: "";position: absolute;left: 0;bottom: 0;width: 13em;height: 1px;background: #000;transform: scaleX(0);transform-origin: left;animation: lineMove 1s ease forwards;}
@keyframes lineMove {
to {
    transform: scaleX(1);
  }
}
.m4_num_tx{width: 89%;text-align: justify;padding:30px 0;}
.m4_button a{padding: 15px 0;width: 89%;text-align: center;color: #fff;font-weight: 40;font-size: 22px;}
.left .m4_button a{background-color: #e2007e;}
.right .m4_button a{background-color: #00a2eb;}
.m4_button a{transition-duration: .4s;}
.m4_button a:hover{transform: scale(1.1);}
/*------------------------------------END  index.html ----------------------------------- */
/*------------------------------------product.html 商品一覧----------------------------------- */
/*section pr1*/
.osusume{text-align: center;}
.osusume h1{margin-top: 30px;}
.osusume2{width: 70%;margin: 0 auto;}
.osusume2 .font_40b{letter-spacing: -1px;}
.osusume2 p{margin-bottom: 30px;}
.pr_nav{align-items: center;}
.pr_nav li,.ab_nav div{padding:20px 0;}
.pr_nav .left{width: 30%;}
.pr_nav .right{width: 50%;}
.pr_nav .right li{width: 48%;}
.pr_nav .right li a{font-weight: 500;color: #fff;text-align: center;display:block;border-radius: 999px;padding: 10px 0;font-size: clamp(15px, 1.3vw, 25px);position: relative;}
.pr_nav .right li:first-child a{background: #e2007e;}
.pr_nav .right li:last-child a{background: #00a2eb;}
.pr_nav .right li a::after{content: "";display: inline-block;width: 1.5em;height:1.5em;background-size: contain;background-repeat: no-repeat;background-position: center;margin-left: 1em;vertical-align: text-bottom;top: 50%;position: relative;transform: translateY(0.1em);}
.pr_nav .right li a::after{background-image: url('/img/arrow.png');}
.pr1-2 li h2{margin-top: 50px;}
.pr1-2 .center h2{letter-spacing: -3px;}
/*section pr2*/
.pr2 h2{background-color: #000;padding: 50px 0;}
.pr2 h2 img,.pr3 h2 img{margin:0 auto;}
.pr2_line {display: flex;overflow: hidden; padding: 20px 0;}
.pr2_ch .pr2_line{background: #e2007e;}
.pr2_fs .pr2_line{background: #00a2eb;}
.pr2_slider {animation: scroll-left 30s infinite linear .5s both;display: flex; /* スライド3枚を横並び */}
.pr2_slide {width: calc(100vw / 4); /* 3はスライドの枚数 */}
.pr2_slide img {display: block;height:clamp(15px, 1.1vw, 20px); }
/* CSSアニメーション */
@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.pr2_1{justify-content: center;}
.pr2_1 img,.pr2_1 .left,.pr2_1 .right{width: 45%;}
.pr2_1 .pk{text-align: center;}
.pr2_1 .sub {font-size: 25px;font-weight: 400;margin-bottom: 15px;display: inline-block;}
.pr2_1 .name,.pr2_ch .name span {font-size: clamp(20px, 3vw, 60px);font-weight: 800;line-height: 1;position: relative;}
.pr2_ch .name span{color: #e2007e;}
.pr2_fs .name span{color: #00a2eb;letter-spacing:-.1em;}
.pr2_1 .size {background: #000;display: inline-block;padding: 0px 1em 4px;margin: 15px 0;color: #fff;line-height: 1.5;}
.pr2_1 .size span {color: #fff;font-size: 25px;margin-left: 1em;}
.pr2_ch .name::after{left: auto;transform: translateY(9%);}
.products .list li{margin-bottom: .5em;}
.pr2_2 .left{width: 65%;position: relative;}
.pr2_2 .right{width: 25%;}
.pr2_2 .left p{width: 90%;text-align: justify;}
.pr2_2 .title1{margin-bottom: 30px;}
.pr2 table {width: 100%;border-collapse: collapse;border: 2px solid #222; font-family: sans-serif;color: #222;text-align: center;}
.pr2 th,.pr2 td {border: 1px solid #222; padding: .3em 0;vertical-align: middle;}
.pr2_ch tr:nth-child(even){background-color:#ffe9f5 ;}
.pr2_ch tr:last-child{background-color:#fff ;}
.pr2_fs tr:nth-child(even){background-color:#dbfaff ;}
.pr2_fs tr:last-child{background-color:#fff ;}
.pr2_3 h3 img{margin: 0 auto;}
.pr2_3 .title1,.pr3 .title1{margin-bottom: 50px;}
.pr2_3 .left,.pr3 .left{width: 50%;}
.pr2_3 .right,.pr3 .right{width: 45%;}
.pr2_3 .right li,.pr3 .left li,.pr3 .right li,.ab1-1 .right li{margin-bottom: .5em;}
.pr3 .left,.pr3 .right{text-align: justify;}
.pr3 .right{border: solid 1px #000;padding-bottom: 1em;}
.pr3 .right li{padding-left: 1em;padding-right:1em;}
.pr3 .right li:first-child{background: #616161;color: #fff;padding-top: 1em;padding-bottom: 1em;margin-bottom: 1em;}
.pr3 .right li span{display: inline-block;font-weight: 600;}
/*------------------------------------END  product.html  ----------------------------------- */
/*------------------------------------about.html アーテミスについて----------------------------------- */
.ab1-1 .left,.ab1-1 .right,.ab2 .left,.ab2 .right{width: 50%;}
.ab1-1 .right .title2,.ab1-1 .right ul{padding: 50px 30px;}
.ab1-1 .left {position: relative;text-align: center;display: flex;}
.ab1-1 .left img{display: block; margin:auto;}
.ab1-2{width: 100vw;height:380px;background:url(/img/bl_s1-2.jpg) 0 0 no-repeat;background-size: cover;}
.ab2 .m4_button{width: 100%;padding: 0;}
.ab2 .m4_button a{background: #000;width: 100%;margin-top: 30px;}
.ab2 h2{text-align: center;margin-bottom: 15px;}
.ab2 h2 img{height:clamp(30px, 8vw, 400px);width: auto;object-fit: contain;}
.ab2 .left{position: relative;}
.ab2 .flex.col {width: 80%;margin: 0 auto;padding-top: 75px;padding-bottom: 75px;flex-direction: column;}
.ab2 .pac {text-align: center;margin: 30px 0;}
/*------------------------------------END  about.html   ----------------------------------- */
/*------------------------------------faq.html よくある質問----------------------------------- */
.fq1 .left,.ct1 .left{width: 70%;padding: 75px 0;}
.fq1 .right,.ct1 .right{width: 30%;background: url(/img/dot.png)50% no-repeat;background-color: #000;background-size: cover;margin-right: calc(-50vw + 50%);}
.fq2 .left{position: relative;}
.fq2 .left .line-vertical{height: 100%;width: 2px;position: absolute;top: 0;right: 0;}
.fq2 .left{width: 10%;}.fq2 .right{width: 90%;}
.fq2 .left .title1{margin: 0 auto;padding-top: 75px;}
.fq2 .right li{padding: 75px 50px;}
.fq2 .right h3::after{content: "";position: absolute;left: 0;bottom:0.5em;width:100%;height: 1px;background: #000;transform: scaleX(0);transform-origin: left;animation: lineMove 1s ease forwards;animation-delay: var(--delay, 1s);}
.fq2 .right h3,.fq2 .right h3+p{position: relative;padding-left:4vw;}
.fq2 .right h3::before,.fq2 .right h3+p::before{content: "";display: inline-block;width: 40px;height: 40px;background-size: contain;background-repeat: no-repeat;background-position: center;vertical-align: text-bottom;position: absolute;left: 0;top:0;}
.fq2 .right h3::before{background-image: url('/img/faq_s1-3.svg');}
.fq2 .right h3+p::before{background-image: url('/img/faq_s1-4.svg');}
.fq2-2wrap {width: 30%;background: #ececec;margin-top: 30px;}
.fq2-2wrap2{width: 85%;margin: 24px auto;}
.fq2 h4{font-size:clamp(20px, 1.5vw, 30px);padding: 10px 0 5px 0;}
.fq2-2wrap2 p span{font-size: clamp(15px, 1vw, 20px);padding-top: 15px;display: inline-block;}
.fq2-2wrap2 p{text-align:justify;}
.sp_faq{display:none;}
.pc_faq{display: block;}
/*------------------------------------END faq.html   ----------------------------------- */

/*------------------------------------お問い合わせ　contact.html------------------------------------*/
.form td,.form th{padding: 15px 10px 20px;text-align: left;/* font-size: 17px; */border-top: solid #eee 1px;padding-bottom: 15px;}
.form td input,.form th input,.form textarea{padding: 10px;}
.form td{width: 65%;}.form th{width: 35%;}
.hissu{font-size: 15px;color:#c30d23;}
textarea{width: 100%;}
.form .text1,.form textarea{width: 100%;padding: 8px 10px;border: 1px solid #969da3;border-radius: 3px;color: #333;/* font-size: 1em; */line-height: 1.5;}
.radio{display: flex;align-items: center;gap: 0 .5em;position: relative;cursor: pointer;}
.radio::before,
.radio:has(:checked)::after {border-radius: 50%;content: '';}
.radio::before {width: 22px;height: 22px;background-color: #e6edf3;}
.radio:has(:checked)::after {position: absolute;top: 50%;left: 11px;transform: translate(-50%, -50%);width: 14px;height: 14px;background-color: #03328d;}
.radio input {display: none;}
.check{display: flex;align-items: center;gap: 0 .5em;position: relative;cursor: pointer;margin-bottom: 10px;}
.check::before,.check:has(:checked)::after{content: '';}
.check::before {width: 20px;height: 20px;border-radius: 3px;background-color: #ebebeb;}
.check:has(:checked)::after {position: absolute;top: 33%;left: 7px;transform: rotate(45deg);width: 4px;height: 8px;border: solid #fff;border-width: 0 2px 2px 0;}
.check input {display: none;}
.button3{width: 300px;text-align: center;margin: 10px 0;}
.button3 a{background: #818181;border-radius: 999px;color: #fff;font-size: 18px;}
.button3 a:hover{opacity: .5;}
.form_container{background:#eee;padding: 50px 0;}
.check:has(:checked)::before {background-color: #000000;}
.form_container .form .text1, .form_container .form textarea{border: none;}
.form {margin-top: 3px;}
.form strong{font-weight: 500;font-size: clamp(15px, 0.9vw, 20px);}
.form tr:first-child th,.form tr:first-child td{border: none;}
.ct_button{text-align:center;margin-bottom: 50px;}
.ct_button input{width: 7em;padding: 5px 10px;border: none;cursor: pointer;font-size: 20px;}
.ct_button input[type="submit"]{background: #000;color: #fff;}
input.hov1{transition-duration: .4s;}
input.hov1:hover{transform: scale(1.1);}
.kuro{color:#000;}
.pol_list{padding-top: 50px;max-width: 900px;}
.pol_list li{padding-bottom:10px;margin-bottom: 10px;border-bottom: solid 1px #eee;}
.pol_list span{width: 2%;font-weight: 200;font-size: 25px;color: #000000;}
.pol_list p{width: 90%;}
/*------------------------------------END contact.html   ----------------------------------- */









/*------------------------------------スマホレスポンシブ対応----------------------------------- */
@media only screen and (max-width:1300px) {
.wrap{max-width: 900px;}
.menu{padding: 22px 0;}
.flat_wrap{max-width: 400px;}
.kodawari2{width: 70%;}
.m3-2-2 .title2 {width: 90%;}
.m3-2-3 .right img {max-width: 100%;}
.right .m4_title p, .right .m4_num .title2 img, .right .m4_num_tx, .right .m4_button {padding-left: clamp(15px, 2vw, 50px);}
.m4_num .title2 {font-size: 15px;padding-bottom: 13px;}
.m4_num .title2 img {height: 6vw;}
.m4_title p,.m4_title .m4_fs{font-size: clamp(20px, 3.8vw, 60px);}
.ab1-2{background-size:contain;}
.ab2 h2 img {height:auto;}
}


@media only screen and (max-width:900px) {
.sp{display: block;}
.pc{display: none;}
.logo img {max-width: 110px;}
/*width:100%にするもの*/
.mv_title_right,.mv_title_left,.m3-1wrap .left,.m3-2-1 .right, .m3-2-1 .left,.m3-2-1 .right p,.m3-2-3 li,.m3-2-3 .left p,.m3-2-4_tx,.m3-2-5 .m3-2_cont,.main4 .left, .main4 .right,.m4_num_tx,.m4_button a,.sp_menu_r .logo,.mv_left,.mv_right,.main_pac .ch_left,.main_pac .fs_right,.pr_nav .left,.pr_nav .right,.pr1-1 .left,.pr1-1 .right,.osusume2,.osusume,.pr1-2 li h2,.pr1-2 li p, .pr2_1 .left, .pr2_1 .right,.pr2_2 .left,.pr2_3 .left,.pr2_3 .right,.pr3 .left,.pr3 .right,.ab1-1 .left, .ab1-1 .right, .ab2 .left, .ab2 .right,.fq2 .right{width: 100%;}
.wrap{max-width:100%;padding-inline: clamp(16px, 4vw, 50px);}
p{font-size: clamp(10px, 2.8vw, 18px);}
/*スマホの時にサイドに10pxあける*/
.sp_pdrl10{padding-right:15px;padding-left:15px;}
/*スマホメニュー*/
.sp_menu.sp{display: flex;position: fixed;width: 100%;z-index: 999;}
.menu.pc{display: none;}
.sp_menu_r{width: 20%;padding-left: 10px;}
.sp_menu_l{width: 80%;}
.menu-list li{padding-left: 15px;}
.menu-list li img{height: 5vw;}/*spメニューの文字サイズ*/
.menu-label .logo{width:100%;max-width: 24vw;padding-left: 10px;}
.onlinestore li{width: 48%;}
.menu-label{margin: 0;}

/*main*/
.line-horizontal.is-active{margin-left:calc(-50vw + 50%);margin-right: calc(-50vw + 50%);width: 100vw;}
.m1_top {padding-top: clamp(60px, 15vw, 85px);}
.mv_right{order: -1;}
.mv_left .artemis_logo {width: clamp(150px, 29vw, 300px);margin: 20px auto 20px;}
.mv_left .hit_logo {width: clamp(200px, 40vw, 380px);margin: 0 auto 20px;}
.mv_title_right,.mv_title_left{padding-top: 20px;padding-bottom: 20px;padding-inline: clamp(16px, 4vw, 32px);}
.mv_title_left p {font-size:clamp(10px, 4.2vw, 30px);}
.mv_title_left {background-size: auto;}
.main_pac {flex-wrap:wrap;}
.flat_wrap {max-width: 70%;}
.m2_list1 .tx_sub {font-size: clamp(15px, 2.3vw, 20px);}
.m2_list1 .tx_main {font-size: clamp(15px, 3vw, 40px);}
.m2_list2 p {font-size: clamp(10px, 2.15vw, 18px);}
.m2_list2 img {height: clamp(15px, 7vw, 50px);}
.m2_list2-2 p {letter-spacing: -0.2em;}
.anc_space{margin-top: 0;padding-top: 0;}
.m3-1wrap .right{padding-top: 0; }
.m3_1-2img img{height: auto;}
.m3-2-1 .left{padding-bottom:0;}
.m3-2-2{display: inherit;}
.m3-2-2 li,.m3-2_cont{width: 80%;}
.m3-2-2 .left,.m3-2-2 .right{margin-left: auto;}
.m3-2-2 .left .line-vertical,.m3-2-2 .right .line-vertical{left: 0;right: auto;}
.m3-2-2 .line-horizontal{width: 100vw;height: 2px;transform: scaleX(0);}
.m3-2-2 .line-horizontal.is-active{transform: scaleX(1);margin-left:calc(-50vw + 50%);margin-right: calc(-50vw + 50%);}
.m3-2-2 .col p,.m3-2-2 .title2,.m3-2-4 .m3-2-4_tx,.m3-2-4 .m3-2num {width: 90%;}
.m3_1-2img img{margin-left: auto;}
.m3-2_cont{position: relative;}
.m3-2_cont .line-vertical{width: 2px;height:100%;transform: scaleY(0);}
.m3-2_cont .line-vertical.is-active{transform: scaleY(1);}
.main4 .title3::before{margin-left:calc(-50vw + 50%)}
.main4 .m4_pk {width: 50%;margin-bottom: 30px;}
.m4_title p,.m4_title .m4_fs,.m4_title .m4_chi {font-size: clamp(40px, 9vw, 65px);}
.m4_num .title2 {font-size: clamp(15px, 4vw,26px);padding:15px 0;position: relative;text-align: end;}
.m4_num .line-horizontal.m4_1 {top:0;}
.m4_num .title2 img {height: clamp(30px, 15vw,100px);position: absolute;left: 0;bottom: 20px;}
.left .m4_num .title2 img {padding-right: 0;}
.m4_num .line-horizontal.m4_2{width: 100vw;right: auto;left: 0;}
.main4 .left{margin-bottom: 50px;}

/*footer*/
.onlinestore{background-size: contain;}
.f_nav .logo img{max-width: unset;width: 22vw;}
.f_nav .logo{width: 100%;text-align: center;}
/*--product.html 商品一覧-- */
.pr_nav li {padding: 1em 0;}
.pr_nav .right li a{font-size: clamp(10px, 2.8vw, 20px);padding: .5em 0;}
.osusume2,.osusume{padding-inline: clamp(16px, 4vw, 32px);}
.osusume2 img{display: block;margin: 0 auto;}
.osusume,.kodawari{max-width: 100%;}
.font_40b {font-size: clamp(15px, 5vw, 30px);}
.osusume2{padding-bottom:75px;}
.pr1-2 li{width: 50%;}
.pr1-2 .right{width:100%;}
.pr1-2 .center+.line-horizontal,.pr2 .line-horizontal {width: 100vw;}
.pr1-2 .left h2,.pr1-2 .left p{padding-right: 10%;}
.pr1-2 .center h2,.pr1-2 .center p{padding-left: 10%;}
.pr2 h2{padding: 30px 0;}
.pr2_1 .name, .pr2_ch .name span {font-size: clamp(20px, 7vw, 60px);}
.pr2_1 .left,.pr2_3 .left,.pr3 .left{margin-bottom: 30px;}
.pr2_1 .sub{margin-bottom: 0;}
.pr2_1 .size{padding: 0px 3em 4px;}
.pr2_2 .right{width: 60%;margin-left: auto;position: relative;}
.pr2_2 .right .scroll-line{left: -20%;}
/*アーテミスについて*/
.ab1-1 .right{padding-inline: clamp(16px, 4vw, 50px);}
.ab1-1 .right .title2{padding: 30px 0;}
.ab1-1 .right ul{padding: 0 0 30px 0;}
.ab1-1 .left{width: 70%; margin: 0 auto;padding:80px 0;}
.ab1-2{width: 100vw;background:url(/img/bl_s1-2sp.jpg) 0 0 no-repeat;background-size: cover;height: 60vw;}
.ab2 .flex.col{width: 100%;padding-top: 50px;padding-bottom: 50px;}
.ab2 h2 img {height: clamp(75px, 16vw, 100px);}
.ab2 .line-horizontal.is-active{margin-left: calc(-50vw + 50%);margin-right: calc(-50vw + 50%);width: 100vw;}
/*よくある質問*/
.sp_faq{display:block;}
.fq1.m1_top{padding-top:0;}
.pc_faq,.fq2 .left{display:none;}
.fq2 .right li {padding: 50px 0px;}
.fq2 .right h3, .fq2 .right h3+p{padding-left: 8vw;}
.sp_faq img {margin: 15px 0;}
.fq2-2wrap{width: 48%;}
/*お問い合わせ*/
.form td,.form th{display: block;width: 100%;border: none;}
.form td{padding: 0;}
.pol_list span,.pol_list p{width: 100%;}
}





@media only screen and (max-width:600px) {
.wrap{max-width: 100%;padding-inline: clamp(16px, 7vw, 40px);}
.osusume2, .osusume{padding-inline: clamp(16px, 7vw, 40px);}
.menu-list li img{height: 6vw;}/*spメニューの文字サイズ*/
p {font-size: clamp(13px, 4vw, 18px);text-align: justify;}
.font_40b {font-size: clamp(15px, 5vw, 30px);}
/*main*/
.loader-logo{width:70%;margin: 0 auto;}
.title1 img {height: 8.5vw;}
.title4 img {height: 15vw;}
.title2 img{height: 17vw;}
.mv_title_left p{font-size: clamp(15px, 6vw, 30px);}
.m2_list2 p {font-size: clamp(10px, 2.2vw, 18px);letter-spacing: -0.2em;}
.ch_left .m2_list2 p {font-size: clamp(13px, 2.2vw, 18px);text-align: center;}
.flat_wrap {max-width: 100%;margin-top: 0;}
.m3_1-2img img{height: auto;}
.m3-2wrap .col img {margin-bottom: 40px;}
.ch_left {background-position-x:10px;background-position-y: 5px;background-size: 57%;}
.fs_right {background-position-x:15px;background-position-y: 15px;background-size: 32%;}
.float_fs3{width: 23%;left: 20px;}
.float_fs2{width: 40%;top: -50px;right: 10px;}
.float_fs4{width: 23%;right: 0;}
.float_fs5{width:47%;}
.m2_list1 li:first-child {width: 40%;}
.m2_list1 li:last-child {width:58%;}
.m2_list1 {align-items: center;}
.m2_list {max-width: 90%;}
.m2_list2 li{padding: 0 7px;}
.kodawari p:last-child img {height: clamp(30px, 12vw, 60px);}
.m3-2-2 li, .m3-2_cont {width: 95%;}
.m4_title .sub,.pr2_1 .sub{font-size: clamp(10px, 5vw, 25px);}
.m4_title .m4_chi,.m4_title p,.m4_title .m4_fs{font-size: clamp(30px, 13vw, 60px);}
.m4_title .m4_fs{letter-spacing:-15px;font-size: clamp(30px, 12vw, 50px);}
.m4_num .line-horizontal{height: 1px;}
.m4_num .title2 {font-size: clamp(15px, 4.2vw, 25px);}
.m4_num .title2 img {height: clamp(30px, 12vw, 80px);}
.m4_button a{font-size:clamp(15px, 4vw, 30px);font-weight: 500;}
.right .m4_title p,.right .m4_num .title2 img,.right .m4_num_tx, .right .m4_button{padding-left: 0;}
.m3-2-2 .col p, .m3-2-2 .title2, .m3-2-4 .m3-2-4_tx, .m3-2-4 .m3-2num {width: 85%;}
/*アーテミスについて*/
.top_title img{height: clamp(15px, 5vw, 40px);}
.ab1-1 .left {padding: 30px 0;}
.ab2 .font_40b{padding-bottom: 10px;}
/*商品一覧*/
.pr_nav .right li{padding: 0 0 1em 0;}
.pr_nav .right li a {font-size: clamp(13px, 3.2vw, 20px);font-weight: 600;}
.pr1-img,.pr1-1 .right{padding-top: 50px;}
.kodawari, .osusume{margin-bottom: 50px;}
.pr2_slide img {height: clamp(10px, 0.8vw, 15px);}
.pr2_1 .name, .pr2_ch .name span {font-size: clamp(30px, 9vw, 60px);}
.pr2_3, .pr2_1, .pr2_2 .left, .pr2_2 .right, .pr3 {padding-bottom: 50px;padding-top: 50px;}
.pr2_2 .right{width: 80%;}
.top_title img{display: inline-block;}
.pr2_1 .size{padding: .2em 0 .5em 0;width: 100%;text-align: center;margin: 15px 0 25px 0;}
/*FAQ*/
.sp_faq img{margin-bottom: 1em;}
.fq2 .right h3::before, .fq2 .right h3+p::before{width: 6vw;height: 6vw;top: .2em;}
.fq2-2wrap{width: 100%;}
.fq2-2wrap2>div{text-align: center;}
.fq2-2wrap2 img{width: 100%;}
.faq .wrap{padding-inline: clamp(16px, 5vw, 32px);}
.fq2 .right li:last-child{padding: 50px 0 0 0;}
.fq2 .right h3, .fq2 .right h3+p {width: 95%;text-align: justify;}
/*お問い合わせ*/
.form .text1{padding:15px 10px;}
.check{margin-bottom: 15px;}
.button3{margin: 20px auto 30px;}
/*footer*/
.onlinestore li{width: 49%;}
.onlinestore li img {height: 6vw;}
.f_navlist li{width: 100%;text-align: center;}
.onlinestore li a {padding: 10px;}
.onlinestore li:nth-of-type(4) img{height: 3vw;}
.f_navbrands li {width: 49%;margin-bottom: 10px;}
.f_navlist, .f_navbrands {margin-bottom: 35px;}
/*追随バナー*/
.follow-banner {bottom:0;left: 0;width: 100%;}
.follow-banner picture {width: 100%;max-width:100%;height: auto;margin: 0 auto;}
.banner-close{right:2px;width: 35px;height: 35px;}
}