@charset "utf-8";

body{
width: 100%;
max-width: auto;
margin: auto;
}

a {
text-decoration: none;
}


.main {
margin: 0 auto;
width: 1280px;
height: auto;
text-align: center;
}

.header-line {
background-color: #d7005d;
background-image:
radial-gradient(#c60056 25%, transparent 50%),
radial-gradient(#c60056 25%, transparent 50%);
background-size: 10px 10px;
background-position: 0 0, 5px 5px;
box-shadow: 0 5px 3px -3px #f0b1cd;
width: auto;
height: 50px;
}

.bottom-line {
background-color: #d7005d;
background-image:
radial-gradient(#c60056 25%, transparent 50%),
radial-gradient(#c60056 25%, transparent 50%);
background-size: 10px 10px;
background-position: 0 0, 5px 5px;
box-shadow: 0 -5px 3px -3px #f0b1cd;
width: auto;
height: 120px;
margin-top: 30px;
}

.contents_area {
position: relative;
width: 1280px;
height: auto;
margin-top: 0px;
display: inline-block;
}

.page-index_box {
width: auto;
height: 100px;
margin-top: 30px;
margin-bottom: 15px;
}

.products-index {
background-image: url('../Products/images/products_index.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 1180px;
height: 100px;
display: inline-block;
}

.archive-index {
background-image: url('../Products/images/archive_index.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 1180px;
height: 100px;
display: inline-block;
}

.online_shop-index {
background-image: url('../Online_shop/images/online_shop_index.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 1180px;
height: 100px;
display: inline-block;
}

.support-index {
background-image: url('../Support/images/support_index.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 1180px;
height: 100px;
display: inline-block;
}

.hover-opacity {
transition-property: opacity;
transition-duration: 0.5s;
}

.hover-opacity:hover {
opacity: 0.5;
}

.monochrome {
filter: grayscale(100%);
}

/* メニュー */
.menu-container {
position: relative;
width: 1280px;
height: 102px;
margin-top: 15px;
display: inline-block;
}

.triangle_logo {
position: absolute;
background-image: url('../images/triangle_logo.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
top: 0px;
left: 50px;
width: 193px;
height: 98px;
display: inline-block;
}

.home_button {
position: absolute;
top: 0px;
left: 296px;
width: 230px;
height: 102px;
}

.products_button {
position: absolute;
top: 0px;
left: 531px;
width: 230px;
height: 102px;
}

.shop_button {
position: absolute;
top: 0px;
left: 766px;
width: 230px;
height: 102px;
}

.support_button {
position: absolute;
top: 0px;
left: 1001px;
width: 230px;
height: 102px;
}

/* トップページ */
.news_base {
position: relative;
width: 1156px;
height: 208px;
background-image: url('../images/news_base.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin-top: 15px;
display: inline-block;
}

.news_text {
position: absolute;
top: calc((208px - 150px) / 2);
left: 100px;
width: 1020px;
height: 150px;
border-radius: 0 20px 20px 0;
}

.line_top {
position: relative;
width: 1180px;
height: 13px;
background-image: url('../images/line_top.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin-top: 15px;
display: inline-block;
}

.line_bottom {
position: relative;
width: 1180px;
height: 12px;
background-image: url('../images/line_bottom.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin-top: 15px;
display: inline-block;
}

.picup {
position: relative;
width: 1180px;
height: 300px;
margin-top: 30px;
border-radius: 20px;
display: inline-block;
box-shadow: 0px 3px 5px 2px rgba(95, 95, 95, 0.35);
transition: filter 0.5s, transform 0.5s;
}

.picup:hover {
filter: brightness(1.1);
transform: scale(1.02);
}

.info_area {
position: relative;
width: 1180px;
height: 600px;
margin-top: 30px;
display: inline-block;
}

.info_base {
position: relative;
top: 0px;
left: 0px;
width: 800px;
height: 280px;
box-shadow: 0px 3px 5px 2px rgba(95, 95, 95, 0.35);
}

.info_dot {
position: absolute;
top: calc((280px - 260px) / 2);
left: calc((800px - 780px) / 2);
width: 780px;
height: 260px;
background-color: #fff;
background-image:
radial-gradient(#F2F2F2 25%, transparent 50%),
radial-gradient(#F2F2F2 25%, transparent 50%);
background-position: 0 0, 5px 5px;
background-size: 10px 10px;
}

.info_shop_img {
position: absolute;
top: calc((280px - 240px) / 2);
left: calc((800px - 750px) / 2);
width: 750px;
height: 240px;
overflow: hidden;
}

.back_img {
width: 100%;
height: 100%;
object-fit: cover;
transition: filter 0.5s, transform 0.5s;
}

.info_shop_img:hover .back_img {
filter: brightness(1.1);
transform: scale(1.02);
}

.front_img {
position: absolute;
top: calc((280px - 240px) / 2);
left: calc((800px - 750px) / 2);
width: 750px;
height: 240px;
pointer-events: none;
}

.info_dl_base {
position: absolute;
display: flex;
align-items: flex-end;
top: calc((280px - 240px) / 2);
left: calc((800px - 750px) / 2);
width: 750px;
height: 240px;
background-color: #fff;
}

.info_dl_img {
position: absolute;
top: 0px;
left: 0px;
width: 750px;
height: 140px;
transition: filter 0.5s;
}

.info_button_row {
display: flex;
width: 750px;
margin-bottom: 10px;
justify-content: center;
align-items: flex-end;
position: relative;
gap: 15px;
}

.info_button_base {
display: flex;
align-items: center;
justify-content: center;
width: 230px;
height: 80px;
border-radius: 15px;
background-color: #fff;
transition: box-shadow 0.3s;
}

.info_button_base:hover {
box-shadow: inset 0 0 4px 2px rgba(0,0,0,0.35);
}

.button_fanza {
width: 199px;
height: 53px;
transition: filter 0.5s, transform 0.5s;
}

.button_fanza:hover {
filter: brightness(1.1);
transform: scale(1.02);
}

.button_dlsite {
width: 198px;
height: 58px;
transition: filter 0.5s, transform 0.5s;
}

.button_dlsite:hover {
filter: brightness(1.1);
transform: scale(1.02);
}

.button_gyutto {
width: 187px;
height: 50px;
transition: filter 0.5s, transform 0.5s;
}

.button_gyutto:hover {
filter: brightness(1.1);
transform: scale(1.02);
}

.info_label {
position: absolute;
top: -10px;
left: 10px;
width: 185px;
height: 45px;
background-color: #D70058;
}

.label_text{
position: absolute;
top: -14px;
left: 23px;
font-size: 20px;
font-family: "M PLUS 1p", "メイリオ", "Hiragino Kaku Gothic ProN", sans-serif;
font-weight: 800;
color: #fff;
}

.recent_base {
position: relative;
top: -595px;
left: 830px;
width: 350px;
height: 350px;
box-shadow: 0px 3px 5px 2px rgba(95, 95, 95, 0.35);
}

.recent_dot {
position: absolute;
top: calc((350px - 330px) / 2);
left: calc((350px - 330px) / 2);
width: 330px;
height: 330px;
background-color: #fff;
background-image:
radial-gradient(#F2F2F2 25%, transparent 50%),
radial-gradient(#F2F2F2 25%, transparent 50%);
background-position: 0 0, 5px 5px;
background-size: 10px 10px;
}

.recent_label {
position: absolute;
top: -10px;
left: 10px;
width: 155px;
height: 45px;
background-color: #D70058;
}

.recent_img_group {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}

.recent_img {
width: 305px;
height: 81px;
object-fit: contain;
display: block;
transition: filter 0.5s, transform 0.5s;
}

.recent_img:hover {
filter: brightness(1.1);
transform: scale(1.02);
}

.more_label {
position: absolute;
bottom: -10px;
right: 10px;
width: 120px;
height: 35px;
background-color: #fff;
border: 1px solid #D70058;
display: block;
text-decoration: none;
cursor: pointer;
transition: background 0.2s;
}

.more_text {
position: absolute;
top: 2px;
left: 20px;
font-size: 20px;
font-family: "M PLUS 1p", "メイリオ", "Hiragino Kaku Gothic ProN", sans-serif;
font-weight: 800;
color: #D70058;
}

.more_arrow {
position: absolute;
background-image: url('../images/more_arrow.png');
top: calc((35px - 13px) / 2);
left: 85px;
width: 17px;
height: 13px;
background-size: contain;
background-repeat: no-repeat;
}

.more_text,
.more_arrow {
transition: 
transform 0.5s cubic-bezier(.2,1.2,.4,1),
color 0.5s,
filter 0.5s;
will-change: transform, color, filter;
}

.more_label:hover .more_text,
.more_label:hover .more_arrow {
transform: scale(1.05);
filter: brightness(1.5);
}

.social_base {
position: relative;
top: -569px;
left: 830px;
width: 350px;
height: 220px;
}

.social_line_top {
position: absolute;
top: 0px;
width: 350px;
height: 9px;
background-image: url('../images/social_line_top.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

.social_line_bottom {
position: absolute;
bottom: 0px;
width: 350px;
height: 2px;
background-image: url('../images/social_line_bottom.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

.social_group {
position: absolute;
top: 27px;
left: 0;
width: 100%;
height: 170px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.social_row {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
}

.social_row_top {
margin-bottom: 15px;
}

.social_box {
background: #ffffff;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(95,95,95,0.25);
transition: box-shadow 0.25s;
display: flex;
align-items: center;
justify-content: center;
}

.social_box:hover {
box-shadow: 0 2px 16px rgba(215,0,88,0.25);
}

.social_box_wide {
width: 170px;
height: 85px;
}

.social_box_small {
width: 105px;
height: 85px;
}

.social_box img {
max-width: 90%;
max-height: 90%;
transition: transform 0.3s cubic-bezier(.33,1.6,.4,1);
display: block;
}

.social_box:hover img {
transform: scale(1.05);
}

.copyright_text{
display: flex;
font-size: 14px;
font-family: "Hiragino Kaku Gothic ProN", sans-serif;
font-weight: 600;
color: #D70058;
align-items: center;
justify-content: center;
}

/* 製品情報 */
.image-container {
position: relative;
width: 1180px;
height: 378px;
background-image: url('../Products/images/products_base.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin-top: 15px;
display: inline-block;
}

.image-container img.base {
display: inline-block;
width: 100%;
height: auto;
}

.title_text {
position: absolute;
top: -13px;
left: 20px;
transform: translateY(-50%);
color: #fff;
font-size: 28px;
font-weight: bold;
text-shadow: 
#d70159 2px 0px,  #d70159 -2px 0px,
#d70159 0px -2px, #d70159 0px 2px,
#d70159 2px 2px , #d70159 -2px 2px,
#d70159 2px -2px, #d70159 -2px -2px,
#d70159 1px 2px,  #d70159 -1px 2px,
#d70159 1px -2px, #d70159 -1px -2px,
#d70159 2px 1px,  #d70159 -2px 1px,
#d70159 2px -1px, #d70159 -2px -1px;
transform: skewX(-15deg);
}

.release_date_text {
position: absolute;
top: 4%;
right: 18px;
transform: translateY(-50%);
color: #d70159;
font-size: 18px;
font-weight: bold;
text-shadow: 
#fff 2px 0px,  #fff -2px 0px,
#fff 0px -2px, #fff 0px 2px,
#fff 2px 2px , #fff -2px 2px,
#fff 2px -2px, #fff -2px -2px,
#fff 1px 2px,  #fff -1px 2px,
#fff 1px -2px, #fff -1px -2px,
#fff 2px 1px,  #fff -2px 1px,
#fff 2px -1px, #fff -2px -1px;
}

.main_visual {
position: absolute;
top: 50px;
left: 17px;
overflow:hidden;
box-shadow: 5px 5px 5px #cccccc;
}

.main_visual img {
display: block;
width: 190px;
height: 270px;
transition: all 0.5s ease-in-out;
}

.main_visual img:hover{
transform: scale(1.05,1.05);
}

.web_link {
position: absolute;
top: 330px;
left: 22px;
width: 180px;
height: 35px;
}

.story_text_01 {
position: absolute;
top: 84px;
left: 240px;
transform: translateY(-50%);
color: #d7005d;
font-size: 17px;
font-weight: bold;
transform: skewX(-15deg);
}

.story_text_02 {
position: absolute;
top: 105px;
left: 240px;
transform: translateY(-50%);
color: #d7005d;
font-size: 17px;
font-weight: bold;
transform: skewX(-15deg);
}

.story_text_03 {
position: absolute;
top: 126px;
left: 240px;
transform: translateY(-50%);
color: #d7005d;
font-size: 17px;
font-weight: bold;
transform: skewX(-15deg);
}

.spec_text_01 {
position: absolute;
top: 215px;
left: 240px;
transform: translateY(-50%);
color: #3a312f;
font-size: 18px;
font-weight: bold;
}

.spec_text_01b {
position: absolute;
top: 215px;
left: 330px;
transform: translateY(-50%);
color: #3a312f;
font-size: 18px;
font-weight: bold;
}

.spec_text_02 {
position: absolute;
top: 237px;
left: 249px;
transform: translateY(-50%);
color: #3a312f;
font-size: 18px;
font-weight: bold;
}

.spec_text_02b {
position: absolute;
top: 237px;
left: 330px;
transform: translateY(-50%);
color: #3a312f;
font-size: 18px;
font-weight: bold;
}

.spec_text_03 {
position: absolute;
top: 259px;
left: 275px;
transform: translateY(-50%);
color: #3a312f;
font-size: 18px;
font-weight: bold;
}

.spec_text_03b {
position: absolute;
top: 259px;
left: 330px;
transform: translateY(-50%);
color: #3a312f;
font-size: 18px;
font-weight: bold;
}

.spec_text_04 {
position: absolute;
top: 315px;
left: 275px;
transform: translateY(-50%);
color: #3a312f;
font-size: 18px;
font-weight: bold;
}

.spec_text_04b {
position: absolute;
top: 315px;
left: 330px;
transform: translateY(-50%);
color: #3a312f;
font-size: 18px;
font-weight: bold;
}

.spec_text_05 {
position: absolute;
top: 337px;
left: 239px;
transform: translateY(-50%);
color: #3a312f;
font-size: 18px;
font-weight: bold;
}

.spec_text_05b {
position: absolute;
top: 337px;
left: 330px;
transform: translateY(-50%);
color: #3a312f;
font-size: 18px;
font-weight: bold;
}

.official_link {
position: absolute;
top: 123px;
left: 965px;
width: 184px;
height: 44px;
}

.fanza_link {
position: absolute;
top: 209px;
left: 965px;
width: 184px;
height: 44px;
}

.dlsite_link {
position: absolute;
top: 259px;
left: 965px;
width: 184px;
height: 44px;
}

.gyutto_link {
position: absolute;
top: 309px;
left: 965px;
width: 184px;
height: 44px;
}

/* フローティングボタン */
.products_float {
position: fixed;
bottom: 137px;
right: -80px;
width: 80px;
transition: right 0.5s
}

.products_float.visible {
opacity: 1;
right: 0px;
}

/* 通信販売 */
.store_row {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 30px;
width: 100%;
}

.store_row .img_wrap {
width: 560px;
height: 900px;
overflow: hidden;
position: relative;
display: block;
}

.store_row .img_left {
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}

.store_row .img_right {
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}

.store_row img {
object-fit: cover;
display: block;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s;
}

.store_row .img_wrap:hover > img:first-child {
transform: scale(1.06);
filter: brightness(1.16);
}

.geme_title {
position: absolute;
top: 500px;
left: calc((560px - 486px) / 2);
width: 486px;
height: 132px;
pointer-events: none;
}

.goods_title {
position: absolute;
top: 530px;
left: calc((560px - 504px) / 2);
width: 504px;
height: 73px;
pointer-events: none;
}

.store_picup {
position: relative;
width: 1180px;
height: 360px;
margin-top: 30px;
display: inline-block;
}

.store_picup_img {
position: absolute;
top: 0px;
left: 0px;
width: 1180px;
height: 360px;
}

.store_info {
position: relative;
width: 1180px;
height: 350px;
margin-top: 30px;
display: inline-block;
}

.info_line_top {
position: absolute;
background-image: url('../Online_shop/images/info_line_top.png');
top: 0px;
left: 0px;
width: 1180px;
height: 10px;
}

.info_line_bottom {
position: absolute;
background-image: url('../Online_shop/images/info_line_bottom.png');
bottom: 0px;
left: 0px;
width: 1180px;
height: 10px;
}

.store_info_base {
position: absolute;
top: 40px;
left: calc((1180px - 1000px) / 2);
width: 1000px;
height: 270px;
background-color: #fff;
background-image:
radial-gradient(#F2F2F2 25%, transparent 50%),
radial-gradient(#F2F2F2 25%, transparent 50%);
background-position: 0 0, 5px 5px;
background-size: 10px 10px;
}

.store_info_inner {
position: absolute;
top: calc((350px - 220px) / 2);
left: calc((1180px - 950px) / 2);
width: 950px;
height: 220px;
background-color: #ffffff;
text-align: left;
font-size: 18px;
font-weight: bold;
color: #333;
line-height: 1.7;
padding-top: 10px;
padding-left: 50px;
box-sizing: border-box;
box-shadow: inset 0 0 4px 3px rgba(0,0,0,0.13);
}

.highlight {
color: #D70058;
font-weight: bold;
}

.store_info_label {
position: absolute;
top: 30px;
left: 100px;
width: 185px;
height: 45px;
background-color: #D70058;
}

.info_label_text{
position: absolute;
top: -8px;
left: 13px;
font-size: 18px;
font-family: "M PLUS 1p", "メイリオ", "Hiragino Kaku Gothic ProN", sans-serif;
font-weight: 800;
color: #fff;
}

/* サポート */
.support_text-base {
position: relative;
width: 1000px;
height: 430px;
background-color: #FFF5F5;
border-radius: 20px;
margin-top: 30px;
display: inline-block;
}

.support_text-base p {
text-align: left;
margin-left: 50px;
}

.support_text_highlight {
color: #D70058;
font-weight: bold;
}

.support_text_note {
font-size: 13px;
color: #D70058;
margin-top: -10px;
margin-left: 20px;
line-height: 1.4;
}

a.support_list-faq,
a.support_list-base {
display: flex;
align-items: center;
justify-content: flex-start;
width: 1000px;
height: 60px;
margin: 20px auto;
padding-left: 30px;
font-size: 35px;
font-family: "M PLUS 1p", "メイリオ", "Hiragino Kaku Gothic ProN", sans-serif;
font-weight: 800;
color: #fff;
text-decoration: none;
border-radius: 15px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8);
transition: all 0.3s ease;
}

a.support_list-faq {
background-color: #494EE2;
margin-top: 30px;
}

a.support_list-base {
background-color: #D70058;
}

a.support_list-faq:hover,
a.support_list-base:hover {
opacity: 0.8;
transform: scale(1.02);
}

/* サポートタイトル用 */
.support_contents_box {
width: 1000px;
min-height: 60px;
margin: 30px auto;
background: #fff;
border-radius: 20px;
border: 3px solid #D70058;
box-sizing: border-box;
padding: 36px 42px;
text-align: left;
}

.support_text_wrap {
padding-left: 32px;
}

.update_title {
font-size: 22px;
font-weight: bold;
color: #222;
margin-bottom: 10px;
}

.update_subtitle {
font-size: 15px;
color: #D70058;
font-weight: normal;
margin-top: 16px;
margin-bottom: 3px;
letter-spacing: 1px;
}

.indent {
text-indent: 1em;
margin: 0 0 2px 0;
font-size: 15px;
font-weight: normal;
color: #444;
}

.update_note {
font-size: 15px;
color: #D70058;
margin-bottom: 10px;
}

.update_index {
width: 850px;
height: 50px;
margin: 22px auto;
background: #D70058;
color: #fff;
font-size: 28px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
border-radius: 20px;
letter-spacing: 2px;
box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}

.update_desc p {
margin: 0 0 18px 0;
font-size: 17px;
color: #444;
}

.section_title {
margin: 12px 0 6px 0;
font-size: 17px;
font-weight: bold;
color: #222;
}

.update_change ul {
margin: 0 0 0 18px;
padding: 0;
}

.update_change li {
font-size: 16px;
color: #333;
margin-bottom: 3px;
list-style: disc inside;
}

.download_btn_wrap {
width: 300px;
margin: 40px auto 0 auto;
}

a.download_btn {
display: flex !important;
width: 300px !important;
height: 80px !important;
align-items: center;
justify-content: center;
flex-direction: column;
background: #fff;
border: 2px solid #D70058;
border-radius: 18px;
cursor: pointer;
box-shadow: 0 3px 12px rgba(0,0,0,0.04);
transition: box-shadow 0.18s, filter 0.18s;
position: relative;
padding: 0;
user-select: none;
outline: none;
text-decoration: none;
}

a.download_btn:hover {
filter: brightness(1.2);
box-shadow: 0 3px 4px rgba(215,0,88,0.10);
}

.download_text {
font-family: "Montserrat", "メイリオ", "Hiragino Kaku Gothic ProN", sans-serif;
font-size: 32px;
font-weight: 900;
color: #D70058;
letter-spacing: 1px;
line-height: 1.1;
margin-bottom: 8px;
text-transform: uppercase;
}

.download_arrow {
display: block;
width: 100%;
text-align: center;
color: #D70058;
font-size: 32px;
font-weight: bold;
letter-spacing: 0px;
line-height: 0.5;
margin-top: -5px;
transform: scaleY(0.7) scaleX(2.5);
font-family: 'Arial', 'sans-serif';
}