/*
set break point
*/
/*
Width / Height Settings
*/
/*
PC Liquid Value
*/
/*
SP Liquid Value
*/
/*
Line Height
*/
@keyframes cloud {
0% {
transform: scaleX(1) translateY(-15px);
}
100% {
transform: scaleX(0.88) translateY(10px);
}
}
@keyframes postFaceIconHover {
0% {
transform: rotate(0deg);
}
30% {
transform: rotate(-10deg);
}
80% {
transform: rotate(10deg);
}
100% {
transform: rotate(0deg);
}
}
/*------------------------------------------------------------------------------------------
*
*
common_pc.css
*
*
------------------------------------------------------------------------------------------ */
@media screen and (min-width: 751px) {
/*------------------------------------------------------------------------------------------
*
*
min-width : 751px
*
*
------------------------------------------------------------------------------------------ */
/* --------------------------------------------------
*
common settings
*
-------------------------------------------------- */
/* --------------------------------------------------
*
header
*
-------------------------------------------------- */
/* --------------------------------------------------
*
footer
*
-------------------------------------------------- */
body {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
br.sp {
display: none;
}
img.sp {
display: none;
}
.switch_sp, .switch_sp * {
display: none;
}
main {
padding-top: 5.625vw;
background-color: #fff;
position: relative;
min-width: 1050px;
}
.set_bg {
width: 100%;
height: 100%;
overflow: hidden;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
top: 0;
left: 0;
position: relative;
}
.set_bg .bg_inner {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
position: absolute;
top: 0;
left: 0;
}
.set_bg img {
width: 100%;
max-width: 1050px;
opacity: 0;
}
h1.t {
width: 18.39844vw !important;
min-width: 193.18359px !important;
max-width: 235.5px !important;
height: 10.58594vw !important;
min-height: 111.15234px !important;
max-height: 135.5px !important;
transition: margin 0.25s ease;
position: fixed;
top: 1.95313vw;
left: 2.34375vw;
z-index: 10001;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
h1.t a {
display: block;
position: relative;
}
h1.t a:before {
opacity: 0;
content: '';
width: 18.39844vw !important;
min-width: 193.18359px !important;
max-width: 235.5px !important;
height: 10.58594vw !important;
min-height: 111.15234px !important;
max-height: 135.5px !important;
background-repeat: no-repeat;
background-position: center;
background-image: url(../images/logo_on.png);
background-size: contain;
display: block;
position: absolute;
top: -0.46875vw;
left: 0;
z-index: -1;
transition: opacity 0.15s ease;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
h1.t img {
width: 18.39844vw !important;
min-width: 193.18359px !important;
max-width: 235.5px !important;
height: 10.58594vw !important;
min-height: 111.15234px !important;
max-height: 135.5px !important;
}
.is_pc h1.t a:hover:before, .is_sp h1.t a.touch:before {
opacity: 1;
}
h1.lv {
opacity: 0;
pointer-events: none;
width: 26.40625vw !important;
min-width: 277.26563px !important;
max-width: 338px !important;
height: 4.10156vw !important;
min-height: 43.06641px !important;
max-height: 52.5px !important;
transition: margin 0.25s ease;
position: absolute;
top: 0.78125vw;
left: 1.5625vw;
z-index: 10001;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
h1.lv a {
display: block;
position: relative;
}
h1.lv a:before {
opacity: 0;
content: '';
width: 26.40625vw !important;
min-width: 277.26563px !important;
max-width: 338px !important;
height: 4.10156vw !important;
min-height: 43.06641px !important;
max-height: 52.5px !important;
background-repeat: no-repeat;
background-position: center;
background-image: url(../images/logo_s_on.png);
background-size: contain;
display: block;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: opacity 0.15s ease;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
h1.lv:not(.culturen) img {
width: 26.40625vw !important;
min-width: 277.26563px !important;
max-width: 338px !important;
height: 4.10156vw !important;
min-height: 43.06641px !important;
max-height: 52.5px !important;
}
h1.lv.culturen img {
max-width: 338px !important;
height: 4.10156vw !important;
min-height: 43.06641px !important;
max-height: 52.5px !important;
}
.is_pc h1.lv:not(.culturen) a:hover:before, .is_sp h1.lv:not(.culturen) a.touch:before {
opacity: 1;
}
h1 {
transition: opacity, transform !important;
transition-duration: 0.25s !important;
opacity: 1;
transform: translateY(0px);
}
.h_nav h1.t {
opacity: 0;
transform: translateY(-10px);
pointer-events: none !important;
}
h1.lv {
opacity: 0;
transform: translateY(10px);
}
.h_nav h1.lv {
opacity: 1;
transform: translateY(0px);
pointer-events: inherit !important;
}
.lv h1.t {
display: none !important;
}
.lv h1.lv {
opacity: 1 !important;
transform: translateY(0px) !important;
pointer-events: inherit !important;
}
header {
width: 100%;
height: 5.625vw;
min-width: 1050px;
background-color: #fff;
display: flex;
align-items: flex-end;
top: 0;
left: 0;
position: fixed;
z-index: 1000;
}
header .head_inner {
width: 100%;
height: 5.625vw;
display: flex;
justify-content: flex-end;
align-content: flex-start;
margin: 0 auto;
box-sizing: border-box;
padding-top: 2.10938vw;
}
header nav {
padding-bottom: 1.95313vw;
transition: padding 0.25s ease;
}
header nav ul {
display: flex;
align-items: center;
}
header nav ul li {
margin-right: 3.90625vw;
position: relative;
font-size: 1.09375vw;
letter-spacing: 0.12em;
}
header nav ul li:after {
content: '';
width: 2px;
height: 1.17188vw;
background-color: #000;
display: block;
position: absolute;
right: -1.875vw;
top: 0;
}
header nav ul li img {
width: auto;
}
header nav ul li a {
padding: 1.17188vw 0;
display: block;
position: relative;
top: -1.17188vw;
}
header nav ul li a .o {
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
z-index: -1;
transition: opacity 0.15s ease;
}
header nav ul li a .o svg {
width: 3.90625vw !important;
min-width: 41.01563px !important;
max-width: 50px !important;
height: 3.90625vw !important;
min-height: 41.01563px !important;
max-height: 50px !important;
transform: translateX(-50%) translateY(-50%);
}
header nav ul li.about .o svg path {
fill: #d13123;
}
header nav ul li.exhibiton .o svg path {
fill: #fcc800;
}
header nav ul li.webshop .o svg path {
fill: #036eb8;
}
header nav ul li.access .o svg path {
fill: #008d3f;
}
header nav ul li.qa .o svg path {
fill: #b25a2f;
}
header nav ul li.current a .o, .is_pc header nav ul li a:hover .o, .is_sp header nav ul li a.touch .o {
opacity: 1;
}
header .sns {
margin-top: -0.15625vw;
padding-right: 0.78125vw;
}
header .sns ul {
display: flex;
align-items: center;
}
header .sns ul li {
margin-right: 1.5625vw;
}
header .sns ul li svg {
width: auto;
transition: transform 0.2s ease;
}
.is_pc header .sns ul li a:hover svg, .is_sp header .sns ul li a.touch svg {
transform: scale(1.15);
}
header .sns ul li path {
fill: #000;
transition: fill 0.15s ease;
}
.is_pc header .sns ul .ig a:hover path, .is_sp header .sns ul .ig a.touch path {
fill: #ad5660;
}
.is_pc header .sns ul .tw a:hover path, .is_sp header .sns ul .tw a.touch path {
fill: #1ca1f1;
}
footer {
min-width: 1050px;
background-color: #000;
overflow: hidden;
position: relative;
z-index: 10;
}
footer a {
transition: opacity 0.15s ease;
}
.is_pc footer a:hover, .is_sp footer a.touch {
opacity: 0.7;
}
footer .inner {
padding-top: 23px;
padding-bottom: 25px;
display: flex;
justify-content: space-between;
align-items: center;
}
footer .inner ul {
display: flex;
align-items: center;
}
footer .inner .foot_nav {
padding-left: 25px;
}
footer .inner .foot_nav li {
margin-right: 20px;
}
footer .inner .foot_nav li img {
width: auto;
}
footer .inner .foot_nav li.contact img {
height: 23px;
}
footer .inner .foot_nav li.hobo img {
height: 17px;
}
footer .inner .share {
padding-right: 25px;
display: flex;
align-items: center;
}
footer .inner .share p {
margin-right: 5px;
}
footer .inner .share p img {
width: 70px;
}
footer .inner .share li {
margin-left: 20px;
}
footer .inner .share li img {
width: auto;
}
footer .inner .share li.tw img {
height: 32px;
}
footer .inner .share li.fb img {
height: 32px;
}
footer ul.about_hobonichi {
padding-left: 25px;
margin-bottom: 25px;
display: flex;
align-items: center;
}
footer ul.about_hobonichi li {
margin-right: 25px;
}
footer ul.about_hobonichi a {
color: #fff;
font-size: 80%;
}
footer .copyright {
margin-bottom: 15px;
text-align: center;
font-size: 10px;
letter-spacing: 0.05em;
color: #fff;
}
}
/* -------------------------------------------------- */
@media screen and (min-width: 1280px) {
/* --------------------------------------------------
*
header
*
-------------------------------------------------- */
main {
padding-top: 72px;
}
h1.t {
top: 25px;
left: 30px;
}
h1.t a:before {
top: -6px;
}
h1.lv {
top: 10px;
left: 20px;
}
header {
height: 72px;
}
header .head_inner {
height: 72px;
padding-top: 27px;
}
header nav {
padding-bottom: 25px;
}
header nav ul li {
margin-right: 50px;
font-size: 14px;
}
header nav ul li:after {
height: 15px;
right: -24px;
}
header nav ul li a {
padding: 15px 0;
top: -15px;
}
header .sns {
margin-top: -2px;
padding-right: 10px;
}
header .sns ul li {
margin-right: 20px;
}
}
/* -------------------------------------------------- */
@media screen and (min-width: 751px) and (max-width: 1050px) {
/* --------------------------------------------------
*
header
*
-------------------------------------------------- */
main {
padding-top: 59.0625px;
}
h1.t {
top: 20.50781px;
left: 24.60938px;
}
h1.t a:before {
top: -4.92188px;
}
h1.lv {
top: 8.20313px;
left: 16.40625px;
}
header {
height: 59.0625px;
}
header .head_inner {
height: 59.0625px;
padding-top: 22.14844px;
}
header nav {
padding-bottom: 20.50781px;
}
header nav ul li {
margin-right: 41.01563px;
font-size: 11.48438px;
}
header nav ul li:after {
height: 12.30469px;
right: -19.6875px;
}
header nav ul li a {
padding: 12.30469px 0;
top: -12.30469px;
}
header .sns {
margin-top: -1.64063px;
padding-right: 8.20313px;
}
header .sns ul li {
margin-right: 16.40625px;
}
}
/* -------------------------------------------------- */
/*------------------------------------------------------------------------------------------
*
*
home_pc.css
*
*
------------------------------------------------------------------------------------------ */
.img_slider {
opacity: 0;
}
.img_slider.on {
opacity: 1;
transition: opacity 0.8s ease 0.35s;
}
@media screen and (min-width: 751px) {
/*------------------------------------------------------------------------------------------
*
*
min-width : 751px
*
*
------------------------------------------------------------------------------------------ */
#home #kv {
width: 100vw;
max-width: 100%;
min-width: 1050px;
overflow: hidden;
background-color: #fff;
padding: 58px 0 40px 0;
}
#home #kv .img_slider .slick-slide {
opacity: 0.25;
transition: opacity 0.45s ease;
}
#home #kv .img_slider .slick-slide.on {
opacity: 1;
}
#home #kv .img_slider .s p {
padding: 0 5px;
}
#home #kv .img_slider .s span {
display: block;
}
#home #kv .img_slider .s img {
width: 720px !important;
height: 406px !important;
}
#home #kv .img_slider .s .bg_inner {
transition: transform 0.45s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.is_pc#home #kv .img_slider .s a:hover .bg_inner, .is_sp#home #kv .img_slider .s a.touch .bg_inner {
transform: scale(1.05);
}
#home #kv .slider_wrap {
position: relative;
}
#home #kv .slider_wrap .btn_prev {
content: '';
width: 11px;
height: 8px;
display: block;
position: absolute;
background-image: url(../images/parts_arrow_l.png);
background-repeat: no-repeat;
background-position: center;
bottom: -18px;
left: calc(50% + 325px);
cursor: pointer;
z-index: 3;
}
#home #kv .slider_wrap .btn_next {
content: '';
width: 11px;
height: 8px;
display: block;
position: absolute;
background-image: url(../images/parts_arrow_r.png);
background-repeat: no-repeat;
background-position: right;
bottom: -18px;
left: calc(50% + 350px);
cursor: pointer;
z-index: 3;
}
#home #kv .slider_wrap .n {
transition: width 0.15s ease, padding 0.15s ease, transform 0.15s ease;
}
.is_pc#home #kv .slider_wrap .btn_prev:hover, .is_sp#home #kv .slider_wrap .btn_prev.touch {
padding: 0 5px;
transform: translateX(-10px);
}
.is_pc#home #kv .slider_wrap .btn_next:hover, .is_sp#home #kv .slider_wrap .btn_next.touch {
width: 16px;
}
#home #content_wrap {
background-position: center;
background-image: url(../images/bg.png);
background-size: 8px;
}
#home #content_wrap h2 {
margin-bottom: 8px;
padding-bottom: 15px;
padding-left: 80px;
font-family: "Shin Maru Go Bold" !important;
font-size: 24px;
letter-spacing: 0.12em;
position: relative;
border-bottom: 2px solid #fff;
box-sizing: border-box;
}
#home #content_wrap h2:before {
content: '';
display: block;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
}
#home #content_wrap h2.r {
border-color: #a52214;
}
#home #content_wrap h2.r:before {
background-image: url(../images/parts_chair_r.png);
width: 36px;
height: 60px;
left: 20px;
top: -15px;
}
#home #content_wrap h2.y {
border-color: #d0a500;
}
#home #content_wrap h2.y:before {
background-image: url(../images/parts_chair_y.png);
width: 33px;
height: 61px;
left: 25px;
top: -16px;
}
#home #content_wrap h2.b {
border-color: #005b9a;
}
#home #content_wrap h2.b:before {
background-image: url(../images/parts_chair_b.png);
width: 37px;
height: 61px;
left: 22px;
top: -16px;
}
#home #content_wrap h2.g {
border-color: #006e2e;
}
#home #content_wrap h2.g:before {
background-image: url(../images/parts_chair_g.png);
width: 37px;
height: 62px;
left: 22px;
top: -15px;
}
#home #content_wrap #todays_info {
opacity: 0;
padding: 40px 0;
}
#home #content_wrap #todays_info.on {
opacity: 1;
transition: opacity 0.25s ease;
}
#home #content_wrap #todays_info .inner {
width: 567px;
height: 32px;
display: table;
margin: 0 auto;
}
#home #content_wrap #todays_info .inner .col_l {
width: 137px;
min-height: 32px;
padding: 10px 0;
padding-right: 15px;
display: table-cell;
text-align: right;
vertical-align: middle;
color: #fff;
background-color: #000;
border-radius: 100px 0 0 100px;
box-sizing: border-box;
}
#home #content_wrap #todays_info .inner .col_l h3 {
letter-spacing: 0.12em;
font-size: 18px;
}
#home #content_wrap #todays_info .inner .col_r {
width: 400px;
padding: 10px 0;
padding-left: 20px;
display: table-cell;
align-items: center;
justify-content: flex-start;
background-color: #fff;
border-radius: 0 100px 100px 0;
box-sizing: border-box;
}
#home #content_wrap #todays_info .inner .col_r p {
letter-spacing: 0.12em;
font-size: 18px;
}
#home #content_wrap #todays_info .inner .col_r .last_admission {
padding-right: 20px;
margin-top: 5px;
font-size: 15px;
line-height: 1.4em;
}
#home #content_wrap #todays_info .inner .holiday {
color: #d13123;
}
#home #content_wrap #section_top {
width: 960px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
#home #content_wrap #section_top #post_in_session {
margin-bottom: 40px;
}
#home #content_wrap #section_top .progress {
height: 73px !important;
}
#home #content_wrap #section_top .progress h3 {
text-align: center;
font-size: 18px;
letter-spacing: 0.12em;
line-height: 73px;
font-weight: 700;
color: #888;
overflow: hidden;
}
#home #content_wrap #section_top .col_l {
width: 600px;
}
#home #content_wrap #section_top .col_l .post_list li {
width: 100%;
height: 156px;
margin-bottom: 8px;
background-color: #fff;
}
#home #content_wrap #section_top .col_l .post_list li a {
width: 100%;
height: 156px;
display: flex;
color: #000;
position: relative;
}
#home #content_wrap #section_top .col_l .post_list li .c_l {
width: 278px;
}
#home #content_wrap #section_top .col_l .post_list li .c_l .ph {
width: 278px;
height: 156px;
}
#home #content_wrap #section_top .col_l .post_list li .c_r {
width: 322px;
position: relative;
box-sizing: border-box;
padding: 10px 20px;
}
#home #content_wrap #section_top .col_l .post_list li .c_r h3 {
font-size: 18px;
letter-spacing: 0.12em;
line-height: 1.77778em;
font-weight: 700;
max-height: 5em;
overflow: hidden;
}
#home #content_wrap #section_top .col_l .post_list li .c_r .date {
font-size: 12px;
letter-spacing: 0.12em;
position: absolute;
bottom: 18px;
left: 20px;
}
#home #content_wrap #section_top .col_l .post_list li .bg_inner {
transition: transform 0.45s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#home #content_wrap #section_top .col_l .post_list li a {
transition: color 0.15s ease;
}
.is_pc#home #content_wrap #section_top .col_l .post_list li a:hover .bg_inner, .is_sp#home #content_wrap #section_top .col_l .post_list li a.touch .bg_inner {
transform: scale(1.05);
}
.is_pc#home #content_wrap #section_top .col_l .post_list li a:hover, .is_sp#home #content_wrap #section_top .col_l .post_list li a.touch {
color: #d13123;
}
#home #content_wrap #section_top .col_r {
width: 350px;
}
#home #content_wrap #section_access {
width: 960px;
margin: 0 auto;
margin-top: 30px;
}
#home #content_wrap #section_access #map {
display: flex;
width: 100%;
height: 324px;
background-color: #fff;
}
#home #content_wrap #section_access #map .col_l {
width: 614px;
}
#home #content_wrap #section_access #map .col_l #gmap {
width: 614px;
height: 324px;
}
#home #content_wrap #section_access #map .col_l #gmap iframe {
width: 614px;
height: 324px;
}
#home #content_wrap #section_access #map .col_r {
width: 346px;
display: flex;
justify-content: center;
align-items: center;
}
#home #content_wrap #section_access #map .col_r .inner dl {
display: table;
}
#home #content_wrap #section_access #map .col_r .inner dl dt {
display: table-cell;
font-size: 14px;
font-weight: 700;
line-height: 1.71429em;
letter-spacing: 0.12em;
}
#home #content_wrap #section_access #map .col_r .inner dl dd {
display: table-cell;
font-size: 14px;
line-height: 1.71429em;
letter-spacing: 0.12em;
}
#home #content_wrap #section_access #map .col_r .inner dl.d1 {
margin-bottom: 20px;
}
#home #content_wrap #section_access #map .col_r .inner dl.d1 dt {
min-width: 70px;
}
#home #content_wrap #section_access #map .col_r .inner dl.d2 {
margin-bottom: 10px;
}
#home #content_wrap #section_access #map .col_r .inner dl.d2 dt {
min-width: 110px;
}
#home #content_wrap #section_access #map .col_r .inner dl.d3 dt {
min-width: 110px;
}
#home #content_wrap #section_access #map .col_r .inner dl.d4 {
margin-bottom: 30px;
}
#home #content_wrap #section_access #map .col_r .inner dl.d4 dt {
min-width: 110px;
}
#home #content_wrap #section_access #map .col_r .inner .notes {
margin-bottom: 20px;
font-size: 12px;
letter-spacing: 0.12em;
}
#home #content_wrap #section_access #map .col_r .inner .btn_detail {
text-align: center;
font-size: 14px;
}
#home #content_wrap #section_access #map .col_r .inner .btn_detail a {
display: inline-block;
color: #006e2e;
position: relative;
}
#home #content_wrap #section_access #map .col_r .inner .btn_detail a:before {
content: '';
width: 5px;
height: 100%;
display: block;
background-repeat: no-repeat;
background-position: center;
background-size: 5px;
background-image: url(../images/parts_tri_r.svg);
position: absolute;
top: 0;
left: -14px;
transition: left 0.15s ease;
}
.is_pc#home #content_wrap #section_access #map .col_r .inner .btn_detail a:hover:before, .is_sp#home #content_wrap #section_access #map .col_r .inner .btn_detail a.touch:before {
left: -9px;
}
#home #content_wrap #section_foot {
padding: 55px 0;
}
#home #content_wrap #section_foot .sns ul {
display: flex;
justify-content: center;
}
#home #content_wrap #section_foot .sns ul li {
width: 200px;
margin: 0 48px;
}
#home #content_wrap #section_foot .sns ul li h4 {
margin-bottom: 12px;
font-size: 18px;
letter-spacing: 0.05em;
text-align: center;
}
#home #content_wrap #section_foot .sns ul li p {
width: 200px;
height: 200px;
}
#home #content_wrap #section_foot .sns ul li p a {
width: 200px;
height: 200px;
overflow: hidden;
display: block;
position: relative;
border-radius: 200px;
}
#home #content_wrap #section_foot .sns ul li p a:after {
content: '';
width: 100%;
height: 100%;
display: block;
background-color: rgba(0, 0, 0, .1);
background-repeat: no-repeat;
background-position: center;
position: absolute;
top: 0;
left: 0;
transition: opacity 0.25s ease, transform 0.25s ease;
}
#home #content_wrap #section_foot .sns ul li p a .bg_inner {
transition: transform 0.45s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.is_pc#home #content_wrap #section_foot .sns ul li p a:hover:after {
opacity: 0;
transform: scale(0.9);
}
.is_pc#home #content_wrap #section_foot .sns ul li p a:hover .bg_inner {
transform: scale(1.1);
}
#home #content_wrap #section_foot .sns ul li.tw a:after {
background-image: url(../images/ico_tw_w.svg);
background-size: 88px;
}
#home #content_wrap #section_foot .sns ul li.ig a:after {
background-image: url(../images/ico_ig_w.svg);
background-size: 72px;
}
#home #content_wrap #section_foot .sns ul li.news a:after {
background-image: url(../images/ico_bell_w.svg);
background-size: 72px;
}
#home #other_site .culturen {
height: 143px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
#home #other_site .culturen img {
transition: opacity 0.15s ease;
}
.is_pc#home #other_site .culturen:hover img, .is_sp#home #other_site .culturen.touch img {
opacity: 0.7;
}
#home #other_site .tobichi ul {
display: flex;
border-top: 2px solid #7d7d7d;
}
#home #other_site .tobichi ul li {
width: 50%;
height: 130px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
border-right: 2px solid #7d7d7d;
}
#home #other_site .tobichi ul li img {
transition: opacity 0.15s ease;
}
#home #other_site .tobichi ul li:last-child {
border-right: none;
}
#home #other_site .tobichi ul li a {
display: block;
}
.is_pc#home #other_site .tobichi ul li a:hover img, .is_sp#home #other_site .tobichi ul li a.touch img {
opacity: 0.7;
}
}
@media screen and (min-width: 1280px) {
}
@media screen and (min-width: 751px) and (max-width: 1050px) {
}
/*------------------------------------------------------------------------------------------
*
*
about_pc.css
*
*
------------------------------------------------------------------------------------------ */
@media screen and (min-width: 751px) {
/*------------------------------------------------------------------------------------------
*
*
min-width : 751px
*
*
------------------------------------------------------------------------------------------ */
#about #content_wrap {
background-position: center;
background-image: url(../images/bg.png);
background-size: 8px;
overflow: hidden;
}
#about #content_wrap .inner {
width: 960px;
margin: 0 auto;
padding-top: 40px;
}
#about #content_wrap h2 {
margin-bottom: 8px;
padding-bottom: 18px;
text-align: center;
font-size: 24px;
letter-spacing: 0.12em;
position: relative;
border-bottom: 2px solid #a52214;
}
#about #content_wrap h2 span {
padding-left: 64px;
display: inline-block;
position: relative;
}
#about #content_wrap h2 span:after {
content: '';
display: block;
width: 42px;
height: 70px;
background-image: url(../images/parts_chair_r.png);
background-repeat: no-repeat;
background-position: left top;
background-size: contain;
position: absolute;
top: -18px;
left: 0;
}
#about #content_wrap h2.br {
border-color: #944924 !important;
}
#about #content_wrap h2.br span {
padding-left: 58px !important;
}
#about #content_wrap h2.br span:after {
background-image: url(../images/parts_chair_br.png) !important;
width: 39px !important;
height: 71px !important;
top: -21px !important;
}
#about #content_wrap .s {
overflow: hidden;
margin-bottom: 50px;
background-color: #fff;
}
#about #content_wrap .s .desc {
padding-top: 50px;
padding-bottom: 40px;
padding-left: 230px;
}
#about #content_wrap .s .desc p {
margin-bottom: 2em;
font-size: 16px;
line-height: 2em;
letter-spacing: 0.12em;
}
#about #content_wrap .s .desc p .b {
font-weight: 700;
}
#about #content_wrap .s .desc p .s {
font-size: 12px;
}
#about #content_wrap .s .desc p a {
color: #d13123;
border-bottom: 1px solid #fff;
transition: border 0.15s ease;
}
.is_pc#about #content_wrap .s .desc p a:hover, .is_sp#about #content_wrap .s .desc p a.touch {
border-color: #d13123;
}
#about #content_wrap .s .btn_detail {
margin-top: -40px;
margin-bottom: 60px;
text-align: center;
}
#about #content_wrap .s .btn_detail span {
display: inline-block;
}
#about #content_wrap .s .btn_detail a {
height: 60px;
padding: 0 76px 0 30px;
background-color: #fff;
display: flex;
align-items: center;
font-size: 18px;
letter-spacing: 0.12em;
background-image: url(../images/parts_external.png);
background-repeat: no-repeat;
background-size: 26px;
background-position: calc(100% - 30px) center;
box-sizing: border-box;
color: #b25a2f;
border: 1px solid #b25a2f;
border-radius: 60px;
transition: color, background;
transition-duration: 0.1s;
}
.is_pc#about #content_wrap .s .btn_detail a:hover, .is_sp#about #content_wrap .s .btn_detail a.touch {
color: #fff;
background-color: #b25a2f;
background-image: url(../images/parts_external_on.png);
}
#about #content_wrap #s1 .pic img {
width: 100%;
}
#about #content_wrap #s2 {
position: relative;
}
#about #content_wrap #s2 .pic {
padding-top: 70px;
padding-left: 180px;
}
#about #content_wrap #s2:before {
content: '';
width: 100%;
height: 2px;
display: block;
background-color: #d0a500;
top: 0;
left: 0;
transform: translateY(-10px);
}
#about #content_wrap #s3 .img {
line-height: 0;
}
#about #content_wrap #s3 .img img {
width: 100%;
}
#about #content_wrap #s3 .img a {
opacity: 1;
transition: opacity 0.15s ease;
}
.is_pc#about #content_wrap #s3 a:hover, .is_sp#about #content_wrap #s3 a.touch {
opacity: 0.8;
}
#about #content_wrap #s4 {
margin-bottom: 4px !important;
position: relative;
}
#about #content_wrap #s4 .pic {
padding-top: 70px;
padding-left: 170px;
margin-bottom: -10px;
}
#about #content_wrap #s5 {
margin-bottom: 55px;
position: relative;
}
#about #content_wrap #s5 .pic {
padding-top: 67px;
padding-left: 170px;
}
}
@media screen and (min-width: 1280px) {
}
@media screen and (min-width: 751px) and (max-width: 1050px) {
}
/*------------------------------------------------------------------------------------------
*
*
access_pc.css
*
*
------------------------------------------------------------------------------------------ */
@media screen and (min-width: 751px) {
/*------------------------------------------------------------------------------------------
*
*
min-width : 751px
*
*
------------------------------------------------------------------------------------------ */
#access #content_wrap {
background-position: center;
background-image: url(../images/bg.png);
background-size: 8px;
overflow: hidden;
}
#access #content_wrap .inner {
width: 960px;
margin: 0 auto;
padding-top: 40px;
}
#access #content_wrap h2 {
margin-bottom: 8px;
padding-bottom: 18px;
text-align: center;
font-size: 24px;
letter-spacing: 0.12em;
position: relative;
border-bottom: 2px solid #006e2e;
}
#access #content_wrap h2 span {
padding-left: 64px;
display: inline-block;
position: relative;
}
#access #content_wrap h2 span:after {
content: '';
display: block;
width: 43px;
height: 72px;
background-image: url(../images/parts_chair_g.png);
background-repeat: no-repeat;
background-position: left top;
background-size: contain;
position: absolute;
top: -18px;
left: 0;
}
#access #content_wrap h2.b {
border-color: #0b408e !important;
}
#access #content_wrap h2.b span {
padding-left: 64px !important;
}
#access #content_wrap h2.b span:after {
background-image: url(../images/parts_chair_b.png) !important;
width: 43px !important;
height: 71px !important;
top: -11px !important;
}
#access #content_wrap #map {
background-color: #fff;
margin-bottom: 45px;
}
#access #content_wrap #map #gmap {
width: 100%;
height: 380px;
}
#access #content_wrap #map #gmap iframe {
width: 100%;
height: 380px;
}
#access #content_wrap #map .desc {
width: 100%;
display: flex;
justify-content: center;
padding: 30px 0 10px 0;
}
#access #content_wrap #map .desc dl {
display: table;
}
#access #content_wrap #map .desc dl dt {
display: table-cell;
font-size: 14px;
font-weight: 700;
line-height: 1.71429em;
letter-spacing: 0.12em;
}
#access #content_wrap #map .desc dl dd {
display: table-cell;
font-size: 14px;
line-height: 1.71429em;
letter-spacing: 0.12em;
}
#access #content_wrap #map .desc dl.d1 {
margin-bottom: 20px;
}
#access #content_wrap #map .desc dl.d1 dt {
min-width: 70px;
}
#access #content_wrap #map .desc dl.d2 {
margin-bottom: 10px;
}
#access #content_wrap #map .desc dl.d2 dt {
min-width: 110px;
}
#access #content_wrap #map .desc dl.d3 dt {
min-width: 110px;
}
#access #content_wrap #map .desc dl.d4 {
margin-bottom: 30px;
}
#access #content_wrap #map .desc dl.d4 dt {
min-width: 110px;
}
#access #content_wrap #map .desc .notes {
margin-bottom: 22px;
font-size: 12px;
letter-spacing: 0.12em;
}
#access #content_wrap #qa #qa_nav {
margin-bottom: 27px;
background-color: #fff;
text-align: center;
}
#access #content_wrap #qa #qa_nav ul {
width: 680px;
padding: 40px 0 25px 0;
margin: 0 auto;
overflow: hidden;
}
#access #content_wrap #qa #qa_nav li {
display: inline-block;
margin: 0 10px;
margin-bottom: 15px;
}
#access #content_wrap #qa #qa_nav li a {
font-size: 16px;
letter-spacing: 0.12em;
}
#access #content_wrap #qa .sq {
background-color: #fff;
margin-bottom: 50px;
position: relative;
}
#access #content_wrap #qa .sq:before {
content: '';
display: block;
width: 100%;
height: 2px;
background-color: #000;
top: 0;
left: 0;
transform: translateY(-8px);
}
#access #content_wrap #qa #q1:before {
background-color: #a52214;
}
#access #content_wrap #qa #q2:before {
background-color: #d0a500;
}
#access #content_wrap #qa #q3:before {
background-color: #0b408e;
}
#access #content_wrap #qa #q4:before {
background-color: #006e2e;
}
#access #content_wrap #qa #q5:before {
background-color: #944924;
}
#access #content_wrap #qa #qa_body h3 {
padding: 32px 0;
font-size: 24px;
text-align: center;
letter-spacing: 0.12em;
}
#access #content_wrap #qa #qa_body li {
margin-top: 3px;
}
#access #content_wrap #qa #qa_body li h4 {
padding: 30px 100px 30px 178px;
display: flex;
align-items: center;
background-image: url(../images/parts_q.svg);
background-repeat: no-repeat;
background-position: 137px 35px;
background-size: 30px 21px;
background-color: #e6e6e6;
font-size: 24px;
font-weight: 700;
line-height: 1.33333em;
letter-spacing: 0.12em;
position: relative;
box-sizing: border-box;
cursor: pointer;
transition: background 0.15s ease;
}
#access #content_wrap #qa #qa_body li h4:after {
content: '';
display: block;
width: 22px;
height: 15px;
background-repeat: no-repeat;
background-position: center;
background-image: url(../images/ico_arrow_d.svg);
background-size: contain;
position: absolute;
top: 35px;
right: 25px;
transition: transform 0.15s ease;
}
.is_pc#access #content_wrap #qa #qa_body li h4:hover, .is_sp#access #content_wrap #qa #qa_body li h4.touch {
background-color: #ddd;
}
#access #content_wrap #qa #qa_body li h4.on:after {
transform: rotateX(-180deg);
}
#access #content_wrap #qa #qa_body li .ans {
display: none;
padding: 23px 0 25px 0;
padding-left: 180px;
background-repeat: no-repeat;
background-image: url(../images/parts_a.svg);
background-position: 137px 28px;
background-size: 30px 21px;
}
#access #content_wrap #qa #qa_body li .ans p {
font-size: 16px;
line-height: 2em;
margin-bottom: 1.5em;
letter-spacing: 0.12em;
}
#access #content_wrap #qa #qa_body li .ans p a {
color: #d13123;
border-bottom: 1px solid #fff;
transition: border 0.15s ease;
}
.is_pc#access #content_wrap #qa #qa_body li .ans p a:hover, .is_sp#access #content_wrap #qa #qa_body li .ans p a.touch {
border-bottom: 1px solid #d13123;
}
#access #content_wrap #qa #qa_body .notes {
text-align: center;
margin-bottom: 55px;
margin-top: -5px;
}
#access #content_wrap #qa #qa_body .notes p {
font-size: 16px;
line-height: 2em;
display: inline-block;
text-align: left;
letter-spacing: 0.12em;
}
#access #content_wrap #qa #qa_body .notes p a {
color: #d13123;
border-bottom: 1px solid #fff;
transition: border 0.15s ease;
}
.is_pc#access #content_wrap #qa #qa_body .notes p a:hover, .is_sp#access #content_wrap #qa #qa_body .notes p a.touch {
border-bottom: 1px solid #d13123;
}
}
@media screen and (min-width: 1280px) {
}
@media screen and (min-width: 751px) and (max-width: 1050px) {
}
/*------------------------------------------------------------------------------------------
*
*
exhibition_pc.css
*
*
------------------------------------------------------------------------------------------ */
@media screen and (min-width: 751px) {
/*------------------------------------------------------------------------------------------
*
*
min-width : 751px
*
*
------------------------------------------------------------------------------------------ */
#exhibition #content_wrap {
background-position: center;
background-image: url(../images/bg.png);
background-size: 8px;
overflow: hidden;
}
#exhibition #content_wrap .inner {
width: 960px;
margin: 0 auto;
padding-top: 40px;
}
#exhibition #content_wrap h2 {
margin-bottom: 25px;
padding-bottom: 18px;
text-align: center;
font-size: 24px;
letter-spacing: 0.12em;
position: relative;
}
#exhibition #content_wrap h2 span {
padding-left: 64px;
display: inline-block;
position: relative;
}
#exhibition #content_wrap h2 span:after {
content: '';
display: block;
width: 38px;
height: 71px;
background-image: url(../images/parts_chair_y.png);
background-repeat: no-repeat;
background-position: left top;
background-size: contain;
position: absolute;
top: -18px;
left: 0;
}
#exhibition #content_wrap article {
margin-bottom: 20px;
}
#exhibition #content_wrap h3 {
font-size: 20px;
letter-spacing: 0.12em;
font-weight: 700;
padding-bottom: 12px;
border-bottom: 2px solid #fff;
}
#exhibition #content_wrap .open h3 {
color: #a52214;
border-color: #a52214;
}
#exhibition #content_wrap .notice h3 {
color: #d0a500;
border-color: #d0a500;
}
#exhibition #content_wrap .night_live h3 {
color: #005b9a;
border-color: #005b9a;
display: flex;
align-items: center;
}
#exhibition #content_wrap .night_live h3 .i {
margin-right: 26px;
}
#exhibition #content_wrap .night_live h3 .i img {
width: 69px;
}
#exhibition #content_wrap .archive h3 {
color: #944924;
border-color: #944924;
}
#exhibition #content_wrap .post_list .progress {
height: 73px !important;
}
#exhibition #content_wrap .post_list .progress h4 {
text-align: center;
font-size: 18px;
letter-spacing: 0.12em;
line-height: 73px;
font-weight: 700;
color: #888;
overflow: hidden;
}
#exhibition #content_wrap .post_list li {
width: 100%;
height: 208px;
margin-top: 8px;
background-color: #fff;
}
#exhibition #content_wrap .post_list li a {
width: 100%;
height: 208px;
display: flex;
color: #000;
position: relative;
}
#exhibition #content_wrap .post_list li .status {
opacity: 0;
padding: 2px 5px 4px 10px;
background-color: #000;
font-size: 12px;
letter-spacing: 0.12em;
color: #fff;
position: absolute;
top: 0;
right: 0;
background-repeat: no-repeat;
background-position: 10px center;
}
#exhibition #content_wrap .post_list li .status.show {
opacity: 1;
}
#exhibition #content_wrap .post_list li .status .t {
margin-right: 5px;
display: inline-block;
}
#exhibition #content_wrap .post_list li .status .t svg {
width: 16px;
height: 12px;
}
#exhibition #content_wrap .post_list li .status .t svg path {
fill: #fff;
}
#exhibition #content_wrap .post_list li.end .status {
background-color: #eee;
color: #555;
}
#exhibition #content_wrap .post_list li.end .status .t path {
fill: #555;
}
#exhibition #content_wrap .post_list li .c_l {
width: 370px;
}
#exhibition #content_wrap .post_list li .c_l .ph {
width: 370px;
height: 208px;
}
#exhibition #content_wrap .post_list li .c_r {
width: 590px;
position: relative;
box-sizing: border-box;
padding: 35px 45px 0 45px;
}
#exhibition #content_wrap .post_list li .c_r h4 {
max-height: 6em;
overflow: hidden;
font-size: 18px;
letter-spacing: 0.12em;
line-height: 2em;
font-weight: 700;
}
#exhibition #content_wrap .post_list li .c_r .date {
font-size: 12px;
letter-spacing: 0.12em;
position: absolute;
bottom: 40px;
left: 45px;
}
#exhibition #content_wrap .post_list li .bg_inner {
transition: transform 0.45s cubic-bezier(0.165, 0.84, 0.44, 1);
}
#exhibition #content_wrap .post_list li a {
transition: color 0.15s ease;
}
.is_pc#exhibition #content_wrap .post_list li a:hover .bg_inner, .is_sp#exhibition #content_wrap .post_list li a.touch .bg_inner {
transform: scale(1.05);
}
.is_pc#exhibition #content_wrap .post_list li a:hover, .is_sp#exhibition #content_wrap .post_list li a.touch {
color: #d13123;
}
#exhibition #content_wrap article.cl {
margin-top: 40px;
margin-bottom: 40px;
width: 100%;
border-top: 2px solid #006e2e;
padding-top: 8px;
}
#exhibition #content_wrap article.cl .closed {
width: 100%;
display: flex;
min-height: 68px;
}
#exhibition #content_wrap article.cl .closed .col_l {
width: 373px;
background-color: #000;
display: flex;
align-items: center;
justify-content: center;
}
#exhibition #content_wrap article.cl .closed .col_l p {
font-size: 18px;
color: #fff;
letter-spacing: 0.12em;
}
#exhibition #content_wrap article.cl .closed .col_r {
width: 587px;
padding: 10px 0;
background-color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
#exhibition #content_wrap article.cl .closed .col_r dl {
padding-left: 35px;
display: table;
margin-bottom: 5px;
}
#exhibition #content_wrap article.cl .closed .col_r dl dt {
font-size: 18px;
font-weight: 700;
letter-spacing: 0.12em;
display: table-cell;
}
#exhibition #content_wrap article.cl .closed .col_r dl dt span {
display: block;
min-width: 65px;
position: relative;
}
#exhibition #content_wrap article.cl .closed .col_r dl dt span:after {
content: '｜';
position: absolute;
top: 0;
right: 0;
}
#exhibition #content_wrap article.cl .closed .col_r dl dd {
display: table-cell;
padding-left: 5px;
padding-right: 35px;
font-size: 18px;
font-weight: 700;
color: #d13123;
letter-spacing: 0.12em;
line-height: 1.8em;
}
#exhibition #content_wrap article.archive {
margin-bottom: 160px;
}
#exhibition #content_wrap article.archive ul {
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
#exhibition #content_wrap article.archive ul li {
width: calc(33.333% - 4px);
margin-top: 8px;
height: 178px;
display: block;
position: relative;
}
#exhibition #content_wrap article.archive ul li a {
width: 100%;
height: 100%;
display: block;
}
#exhibition #content_wrap article.archive ul li .bg_inner {
transition: transform 0.45s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.is_pc#exhibition #content_wrap article.archive ul li a:hover .bg_inner, .is_sp#exhibition #content_wrap article.archive ul li a.touch .bg_inner {
transform: scale(1.05);
}
}
@media screen and (min-width: 1280px) {
}
@media screen and (min-width: 751px) and (max-width: 1050px) {
}
/*------------------------------------------------------------------------------------------
*
*
single_pc.css
*
*
------------------------------------------------------------------------------------------ */
@media screen and (min-width: 751px) {
/*------------------------------------------------------------------------------------------
*
*
min-width : 751px
*
*
------------------------------------------------------------------------------------------ */
#single {
min-width: 1050px;
}
#single #kv {
padding: 20px 0 40px 0;
}
#single #kv p {
width: 960px;
margin: 0 auto;
}
#single #kv p img {
width: 100%;
}
#single #content_wrap {
padding-bottom: 45px;
background-position: center;
background-image: url(../images/bg.png);
background-size: 8px;
overflow: hidden;
}
#single #content_wrap .inner {
width: 960px;
margin: 0 auto;
padding-top: 50px;
display: flex;
justify-content: space-between;
position: relative;
}
#single #content_wrap .col_l {
width: 258px;
position: absolute;
top: 50px;
left: 0;
transform: translateX(0px);
}
#single #content_wrap .col_l:before {
content: '';
display: block;
width: 100%;
height: 2px;
background-color: #a52214;
position: absolute;
top: 0;
left: 0;
transform: translateY(-8px);
}
.fix#single #content_wrap .col_l {
position: fixed;
padding-top: 8px;
left: calc(50% - 480px);
top: 8.90625vw;
transition: top, left, padding;
transition-duration: 0s;
height: 76.5625vh;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
.fix#single #content_wrap .col_l:before {
transform: translateY(0px);
}
#single #content_wrap .col_l .status {
padding: 10px 0;
text-align: center;
background-color: #fff;
font-size: 18px;
font-weight: 700;
color: #a52214;
letter-spacing: 0.12em;
}
#single #content_wrap .col_l h2 {
padding: 35px 0;
font-size: 18px;
line-height: 1.66667em;
letter-spacing: 0.12em;
}
#single #content_wrap .col_l .info {
padding-top: 25px;
padding-bottom: 8px;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
text-align: left;
}
#single #content_wrap .col_l .info th {
min-width: 70px;
padding-bottom: 20px;
font-weight: 700;
font-size: 16px;
line-height: 1.5em;
letter-spacing: 0.12em;
}
#single #content_wrap .col_l .info td {
padding-bottom: 20px;
font-size: 16px;
line-height: 1.5em;
letter-spacing: 0.12em;
}
#single #content_wrap .col_l .info td.d {
letter-spacing: 0.06em;
white-space: nowrap;
}
#single #content_wrap .col_l .info td .n {
margin-top: 1em;
font-size: 14px;
}
#single #content_wrap .col_l .p_share {
padding: 30px 0;
display: flex;
align-items: center;
}
#single #content_wrap .col_l .p_share p {
font-size: 14px;
font-weight: 700;
margin-right: 25px;
letter-spacing: 0.05em;
}
#single #content_wrap .col_l .p_share ul {
display: flex;
align-items: center;
}
#single #content_wrap .col_l .p_share ul li {
margin-right: 20px;
}
#single #content_wrap .col_l .p_share ul li svg {
width: 32px;
height: 32px;
}
#single #content_wrap .col_l .p_share ul li.tw a path {
fill: #000;
transition: fill 0.15s ease;
}
.is_pc#single #content_wrap .col_l .p_share ul li.tw a:hover path, .is_sp#single #content_wrap .col_l .p_share ul li.tw a.touch path {
fill: #1da1f2;
}
#single #content_wrap .col_l .p_share ul li.fb a path {
fill: #000;
transition: fill 0.15s ease;
}
.is_pc#single #content_wrap .col_l .p_share ul li.fb a:hover path, .is_sp#single #content_wrap .col_l .p_share ul li.fb a.touch path {
fill: #3b5998;
}
#single #content_wrap .col_r {
width: 680px;
min-height: 720px;
margin-left: 290px;
position: relative;
background-color: #fff;
padding-top: 60px;
}
#single #content_wrap .col_r:before {
content: '';
display: block;
width: 100%;
height: 2px;
background-color: #a52214;
position: absolute;
top: 0;
left: 0;
transform: translateY(-8px);
}
#single #content_wrap .col_r .txt {
padding-right: 105px;
margin-bottom: 65px;
padding-left: 105px;
}
#single #content_wrap .col_r .txt.block {
padding-top: 50px;
padding-bottom: 30px;
overflow: hidden;
}
#single #content_wrap .col_r .txt h3 {
font-size: 24px;
line-height: 1.5em;
letter-spacing: 0.12em;
margin-bottom: 45px;
font-weight: 700;
}
#single #content_wrap .col_r .txt p + h3 {
margin-top: 65px;
}
#single #content_wrap .col_r .txt p {
font-size: 16px;
line-height: 2em;
margin-bottom: 2em;
letter-spacing: 0.12em;
}
#single #content_wrap .col_r .txt p a {
color: #d13123;
border-bottom: 1px solid #fff;
transition: border 0.15s ease;
}
.is_pc#single #content_wrap .col_r .txt p a:hover, .is_sp#single #content_wrap .col_r .txt p a.touch {
border-bottom: 1px solid #d13123;
}
#single #content_wrap .col_r .txt p strong {
font-weight: 700;
}
#single #content_wrap .col_r .img {
margin-bottom: 70px;
text-align: center;
}
#single #content_wrap .col_r .img.s {
padding: 0 80px;
}
#single #content_wrap .col_r .img img {
max-width: 100%;
}
#single #content_wrap .col_r .img .caption {
text-align: left;
margin-top: 10px;
display: block;
padding-left: 105px;
padding-right: 80px;
font-size: 14px;
line-height: 1.71429em;
color: #878787;
letter-spacing: 0.12em;
}
#single #content_wrap .col_r .img.s .caption {
margin-top: 5px;
font-size: 12px;
text-align: right;
padding-left: 0;
padding-right: 10px;
}
#single #content_wrap .col_r .img a {
transition: filter;
transition-duration: 0.15s;
}
.is_pc#single #content_wrap .col_r .img a:hover, .is_sp#single #content_wrap .col_r .img a.touch {
filter: contrast(0.8) brightness(1.15);
}
#single #content_wrap .col_r .img a:after {
/* display: none !important; */
display: none;
}
#single #content_wrap .col_r .talk + .img {
margin-top: -30px;
}
#single #content_wrap .col_r .talk {
padding-bottom: 45px;
}
#single #content_wrap .col_r .talk dl {
display: flex;
flex-wrap: wrap;
}
#single #content_wrap .col_r .talk dl dt {
width: 160px;
padding-right: 40px;
padding-left: 10px;
text-align: right;
font-size: 16px;
font-weight: 700;
box-sizing: border-box;
line-height: 1.4em;
letter-spacing: 0.12em;
}
#single #content_wrap .col_r .talk dl dd {
width: 450px;
font-size: 16px;
line-height: 2em;
margin-bottom: 1.5em;
color: #333;
position: relative;
top: -5px;
}
#single #content_wrap .col_r .talk dl dd + dd {
padding-left: 160px;
}
#single #content_wrap .col_r .talk dl a {
color: #f469db;
border-bottom: 1px solid transparent;
transition: border 0.15s ease;
}
.is_pc#single #content_wrap .col_r .talk dl a:hover, .is_sp#single #content_wrap .col_r .talk dl a.touch {
border-bottom: 1px solid #f469db;
}
#single #content_wrap .col_r .cart_area {
padding-top: 30px;
border-top: 2px solid #000;
margin: 0 110px;
margin-bottom: 100px;
}
#single #content_wrap .col_r .cart_area .cart_wrap {
opacity: 1;
border-bottom: 1px dashed #aaa;
padding-bottom: 40px;
margin-bottom: 20px;
}
#single #content_wrap .col_r .cart_area .cart_wrap.on {
opacity: 1;
}
#single #content_wrap .col_r .cart_area .cart_wrap:last-child {
border: none;
padding-bottom: 0;
margin-bottom: 0;
}
#single #content_wrap .col_r .cart_area .end {
text-align: center;
font-size: 14px;
letter-spacing: 0.12em;
color: #b25a2f;
}
#single #content_wrap .col_r .cart_area h3 {
margin-bottom: 10px;
font-size: 24px;
line-height: 1.5em;
letter-spacing: 0.12em;
font-weight: 700;
}
#single #content_wrap .col_r .cart_area .price {
margin-bottom: 35px;
color: #b25a2f;
letter-spacing: 0.12em;
font-size: 16px;
font-weight: 700;
}
#single #content_wrap .col_r .cart_area .price .s {
display: inline-block;
font-size: 12px;
font-weight: 400;
}
#single #content_wrap .col_r .cart_area .amount {
margin-bottom: 10px;
font-size: 16px;
letter-spacing: 0.12em;
}
#single #content_wrap .col_r .cart_area .amount input {
margin-left: 5px;
margin-right: 5px;
width: 60px;
font-size: 16px;
border: 1px solid #000;
border-radius: 5px;
padding: 5px 0 5px 10px;
text-align: right;
background-color: #fff;
box-sizing: border-box;
}
#single #content_wrap .col_r .cart_area .cart_btn {
margin-top: 40px;
width: 440px;
height: 70px;
color: #fff;
font-weight: 700;
font-size: 18px;
letter-spacing: 0.12em;
}
#single #content_wrap .col_r .cart_area .cart_btn a {
width: 440px;
height: 70px;
background-color: #d13123;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
transition: background 0.15s ease, color 0.15s ease;
border: 2px solid #d13123;
box-sizing: border-box;
}
.is_pc#single #content_wrap .col_r .cart_area .cart_btn a:hover, .is_sp#single #content_wrap .col_r .cart_area .cart_btn a.touch {
border: 2px solid #d13123;
background-color: #fff;
color: #d13123;
}
.is_pc#single #content_wrap .col_r .cart_area .cart_btn a:hover span:before, .is_sp#single #content_wrap .col_r .cart_area .cart_btn a.touch span:before {
opacity: 0;
}
.is_pc#single #content_wrap .col_r .cart_area .cart_btn a:hover span:after, .is_sp#single #content_wrap .col_r .cart_area .cart_btn a.touch span:after {
opacity: 1;
}
#single #content_wrap .col_r .cart_area .cart_btn a span {
padding-left: 43px;
display: inline-block;
position: relative;
}
#single #content_wrap .col_r .cart_area .cart_btn a span:before {
opacity: 1;
content: '';
width: 26px;
height: 26px;
display: block;
background-repeat: no-repeat;
background-position: center;
background-image: url(../images/ico_cart_w.png);
background-size: contain;
position: absolute;
top: -5px;
left: 0;
transition: opacity 0.15s ease;
}
#single #content_wrap .col_r .cart_area .cart_btn a span:after {
opacity: 0;
content: '';
width: 26px;
height: 26px;
display: block;
background-repeat: no-repeat;
background-position: center;
background-image: url(../images/ico_cart_r.png);
background-size: contain;
position: absolute;
top: -5px;
left: 0;
transition: opacity 0.15s ease;
}
#single #content_wrap .col_r .cart_area .sold {
pointer-events: none !important;
}
#single #content_wrap .col_r .cart_area .sold .cart_btn a {
background-color: #aaa;
border-color: #aaa;
}
#single #content_wrap .col_r .cart_area .sold .cart_btn a span {
padding-left: 0;
}
#single #content_wrap .col_r .cart_area .sold .cart_btn a span:before, #single #content_wrap .col_r .cart_area .sold .cart_btn a span:after {
display: none;
}
#single #content_wrap .col_r .cart_area .st {
margin-top: 10px;
font-size: 12px;
letter-spacing: 0.12em;
color: #036eb8;
}
#single #content_wrap .col_r .cart_area.lot .cart_btn a span:before {
background-image: url(../images/ico_ticket_w.png);
}
#single #content_wrap .col_r .cart_area.lot .cart_btn a span:after {
background-image: url(../images/ico_ticket_r.png);
}
#single #content_wrap .col_r .ticket_text p {
text-align: center;
font-size: 14px;
letter-spacing: 0.12em;
line-height: 1.777em;
color: #b25a2f;
}
#single #content_wrap.on .col_l:before {
background-color: #a52214;
}
#single #content_wrap.on .col_l .status {
color: #a52214;
}
#single #content_wrap.on .col_r:before {
background-color: #a52214;
}
#single #content_wrap.b .col_l:before {
background-color: #d0a500;
}
#single #content_wrap.b .col_l .status {
color: #d0a500;
}
#single #content_wrap.b .col_r:before {
background-color: #d0a500;
}
#single #content_wrap.nl .col_l:before {
background-color: #005b9a;
}
#single #content_wrap.nl .col_l .status {
color: #005b9a;
}
#single #content_wrap.nl .col_r:before {
background-color: #005b9a;
}
#single #content_wrap.e .col_l:before {
background-color: #888;
}
#single #content_wrap.e .col_l .status {
color: #888;
}
#single #content_wrap.e .col_r:before {
background-color: #888;
}
}
@media screen and (min-width: 1280px) {
.fix#single #content_wrap .col_l {
top: 114px;
height: 100vh - 300px;
}
}
@media screen and (min-width: 751px) and (max-width: 1050px) {
.fix#single #content_wrap .col_l {
position: fixed;
padding-top: 8px;
left: 45px;
top: 93.51563px;
transition: top, left, padding;
transition-duration: 0s;
height: 100vh - 246.09375px;
overflow-y: auto;
}
}
/*------------------------------------------------------------------------------------------
*
*
webshop_pc.css
*
*
------------------------------------------------------------------------------------------ */
@media screen and (min-width: 751px) {
/*------------------------------------------------------------------------------------------
*
*
min-width : 751px
*
*
------------------------------------------------------------------------------------------ */
#webshop .cart_wrap {
opacity: 0;
}
#webshop .cart_wrap.on {
opacity: 1;
transition: opacity 0.35s ease 0.05s;
}
#webshop #content_wrap {
background-position: center;
background-image: url(../images/bg.png);
background-size: 8px;
overflow: hidden;
}
#webshop #content_wrap .inner {
width: 960px;
margin: 0 auto;
padding-top: 40px;
}
#webshop #content_wrap h2 {
margin-bottom: 8px;
padding-bottom: 18px;
text-align: center;
font-size: 24px;
letter-spacing: 0.12em;
position: relative;
border-bottom: 2px solid #944924;
}
#webshop #content_wrap h2 span {
padding-left: 62px;
display: inline-block;
position: relative;
}
#webshop #content_wrap h2 span:after {
content: '';
display: block;
width: 39px;
height: 71px;
background-image: url(../images/parts_chair_br.png);
background-repeat: no-repeat;
background-position: left top;
background-size: contain;
position: absolute;
top: -22px;
left: 0;
}
#webshop #content_wrap #top_desc {
padding: 45px 0;
background-color: #fff;
text-align: center;
}
#webshop #content_wrap #top_desc .desc {
display: inline-block;
text-align: left;
}
#webshop #content_wrap #top_desc .desc p {
font-size: 16px;
line-height: 2em;
letter-spacing: 0.12em;
}
#webshop #content_wrap #top_desc .desc a {
color: #d13123;
border-bottom: 1px solid #fff;
transition: border 0.15s ease;
}
.is_pc#webshop #content_wrap #top_desc .desc a:hover, .is_sp#webshop #content_wrap #top_desc .desc a.touch {
border-bottom: 1px solid #d13123;
}
#webshop #content_wrap #head_nav {
padding-top: 40px;
border-bottom: 2px solid #d0a500;
padding-bottom: 24px;
margin-bottom: 8px;
}
#webshop #content_wrap #head_nav ul {
display: flex;
justify-content: space-between;
align-items: center;
}
#webshop #content_wrap #head_nav img {
width: auto;
transition: opacity 0.15s ease;
}
#webshop #content_wrap #head_nav li.store img {
height: 24px;
}
#webshop #content_wrap #head_nav li.help img {
height: 26px;
}
#webshop #content_wrap #head_nav li.b_cart img {
height: 26px;
}
#webshop #content_wrap #head_nav li.change img {
height: 24px;
}
.is_pc#webshop #content_wrap #head_nav a:hover img, .is_sp#webshop #content_wrap #head_nav a.touch img {
opacity: 0.7;
}
#webshop #content_wrap #product_list {
padding-bottom: 40px;
}
#webshop #content_wrap #product_list article {
background-color: #fff;
margin-bottom: 20px;
}
#webshop #content_wrap #product_list article .top {
padding: 40px;
display: flex;
justify-content: space-between;
}
#webshop #content_wrap #product_list article .top .col_l {
width: 380px;
}
#webshop #content_wrap #product_list article .top .col_l .img_slider .set_bg {
width: 380px !important;
height: 380px !important;
background-color: #fff;
display: block;
}
#webshop #content_wrap #product_list article .top .col_l .img_slider .set_bg .bg_inner {
width: 100%;
height: 100%;
background-size: contain;
}
#webshop #content_wrap #product_list article .top .col_l .thumb {
width: 100%;
}
#webshop #content_wrap #product_list article .top .col_l .thumb ul {
width: calc(100% + 20px);
flex-wrap: wrap;
line-height: 0;
}
#webshop #content_wrap #product_list article .top .col_l .thumb ul li {
width: 86px;
height: 86px;
margin-top: 10px;
margin-right: 8px;
display: inline-block;
letter-spacing: -0.4em;
line-height: 0;
cursor: pointer;
background-color: #fff;
transition: opacity 0.15s ease;
}
#webshop #content_wrap #product_list article .top .col_l .thumb ul li .bg_inner {
background-size: contain;
}
#webshop #content_wrap #product_list article .top .col_l .thumb ul li.on, .is_pc#webshop #content_wrap #product_list article .top .col_l .thumb ul li:hover, .is_sp#webshop #content_wrap #product_list article .top .col_l .thumb ul li.touch {
opacity: 0.7;
}
#webshop #content_wrap #product_list article .top .col_r {
width: 440px;
}
#webshop #content_wrap #product_list article .top .col_r h3 {
margin-top: -5px;
margin-bottom: 10px;
font-size: 24px;
line-height: 1.5em;
letter-spacing: 0.12em;
font-weight: 700;
}
#webshop #content_wrap #product_list article .top .col_r .p_price {
margin-bottom: 40px;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.12em;
color: #b25a2f;
}
#webshop #content_wrap #product_list article .top .col_r .p_price .s {
font-size: 12px;
font-weight: 400;
display: inline-block;
}
#webshop #content_wrap #product_list article .top .col_r .cart_list .l {
display: none;
}
#webshop #content_wrap #product_list article .top .col_r .cart_list .l.on {
display: block;
}
#webshop #content_wrap #product_list article .top .col_r .cart_list .sold {
pointer-events: none !important;
}
#webshop #content_wrap #product_list article .top .col_r .cart_list .sold .cart_btn a {
background-color: #aaa;
border-color: #aaa;
}
#webshop #content_wrap #product_list article .top .col_r .cart_list .sold .cart_btn a span {
padding-left: 0;
}
#webshop #content_wrap #product_list article .top .col_r .cart_list .sold .cart_btn a span:before, #webshop #content_wrap #product_list article .top .col_r .cart_list .sold .cart_btn a span:after {
display: none;
}
#webshop #content_wrap #product_list article .top .col_r .cart_list .cart_btn {
width: 440px;
height: 70px;
color: #fff;
font-weight: 700;
font-size: 18px;
letter-spacing: 0.12em;
}
#webshop #content_wrap #product_list article .top .col_r .cart_list .cart_btn a {
width: 440px;
height: 70px;
background-color: #d13123;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
transition: background 0.15s ease, color 0.15s ease;
border: 2px solid #d13123;
box-sizing: border-box;
}
.is_pc#webshop #content_wrap #product_list article .top .col_r .cart_list .cart_btn a:hover, .is_sp#webshop #content_wrap #product_list article .top .col_r .cart_list .cart_btn a.touch {
border: 2px solid #d13123;
background-color: #fff;
color: #d13123;
}
.is_pc#webshop #content_wrap #product_list article .top .col_r .cart_list .cart_btn a:hover span:before, .is_sp#webshop #content_wrap #product_list article .top .col_r .cart_list .cart_btn a.touch span:before {
opacity: 0;
}
.is_pc#webshop #content_wrap #product_list article .top .col_r .cart_list .cart_btn a:hover span:after, .is_sp#webshop #content_wrap #product_list article .top .col_r .cart_list .cart_btn a.touch span:after {
opacity: 1;
}
#webshop #content_wrap #product_list article .top .col_r .cart_list .cart_btn a span {
padding-left: 43px;
display: inline-block;
position: relative;
}
#webshop #content_wrap #product_list article .top .col_r .cart_list .cart_btn a span:before {
opacity: 1;
content: '';
width: 26px;
height: 26px;
display: block;
background-repeat: no-repeat;
background-position: center;
background-image: url(../images/ico_cart_w.png);
background-size: contain;
position: absolute;
top: -5px;
left: 0;
transition: opacity 0.15s ease;
}
#webshop #content_wrap #product_list article .top .col_r .cart_list .cart_btn a span:after {
opacity: 0;
content: '';
width: 26px;
height: 26px;
display: block;
background-repeat: no-repeat;
background-position: center;
background-image: url(../images/ico_cart_r.png);
background-size: contain;
position: absolute;
top: -5px;
left: 0;
transition: opacity 0.15s ease;
}
#webshop #content_wrap #product_list article .top .col_r .st {
margin-top: 10px;
font-size: 12px;
letter-spacing: 0.12em;
color: #036eb8;
}
#webshop #content_wrap #product_list article .top .product_desc {
min-height: 360px;
margin-top: 30px;
}
#webshop #content_wrap #product_list article .top .product_desc p {
margin-bottom: 1.5em;
font-size: 16px;
line-height: 2em;
letter-spacing: 0.12em;
}
#webshop #content_wrap #product_list article .top .product_desc p a {
color: #d13123;
border-bottom: 1px solid #fff;
transition: border 0.15s ease;
}
.is_pc#webshop #content_wrap #product_list article .top .product_desc p a:hover, .is_sp#webshop #content_wrap #product_list article .top .product_desc p a.touch {
border-bottom: 1px solid #d13123;
}
#webshop #content_wrap #product_list article .top .related_content h5 {
margin-bottom: 5px;
font-weight: 700;
font-size: 16px;
line-height: 2em;
}
#webshop #content_wrap #product_list article .top .related_content li {
margin-bottom: 10px;
font-size: 16px;
line-height: 1.5em;
}
#webshop #content_wrap #product_list article .top .related_content li a {
color: #d13123;
border-bottom: 1px solid #fff;
transition: border 0.15s ease;
}
.is_pc#webshop #content_wrap #product_list article .top .related_content li a:hover, .is_sp#webshop #content_wrap #product_list article .top .related_content li a.touch {
border-bottom: 1px solid #d13123;
}
#webshop #content_wrap #product_list article .top .cart_val {
padding-top: 30px;
padding-bottom: 30px;
}
#webshop #content_wrap #product_list article .top .cart_val .c {
margin-bottom: 10px;
border: 2px solid #f5f5f5;
background-color: #f5f5f5;
border-radius: 200px;
transition: background, border;
transition-duration: 0.15s;
}
#webshop #content_wrap #product_list article .top .cart_val .c.on, .is_pc#webshop #content_wrap #product_list article .top .cart_val .c:hover, .is_sp#webshop #content_wrap #product_list article .top .cart_val .c.touch {
border-color: #b25a2f;
background-color: #fff;
}
#webshop #content_wrap #product_list article .top .cart_val table {
width: 100%;
min-height: 48px;
font-size: 16px;
border-radius: 100px;
text-align: center;
letter-spacing: 0.12em;
color: #b25a2f;
cursor: pointer;
}
#webshop #content_wrap #product_list article .top .cart_val table th {
padding: 15px 0;
padding-right: 10px;
padding-left: 25px;
min-width: 100%;
font-size: 16px;
font-weight: 700;
vertical-align: middle;
text-align: left;
}
#webshop #content_wrap #product_list article .top .cart_val table td {
padding: 15px 0;
padding-right: 25px;
min-width: 100%;
font-size: 16px;
font-weight: 700;
vertical-align: middle;
text-align: right;
white-space: nowrap;
}
#webshop #content_wrap #product_list article .top .cart_val table td .s {
margin-left: 10px;
font-size: 12px;
font-weight: 400;
}
#webshop #content_wrap #product_list article .btm {
padding: 40px;
background-color: #f5f5f5;
display: flex;
}
#webshop #content_wrap #product_list article .btm h4 {
margin-bottom: 20px;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.12em;
}
#webshop #content_wrap #product_list article .btm dl {
margin-bottom: 20px;
}
#webshop #content_wrap #product_list article .btm dt {
padding-right: 40px;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.12em;
display: block;
line-height: 2em;
}
#webshop #content_wrap #product_list article .btm dd {
padding-right: 40px;
font-size: 14px;
letter-spacing: 0.12em;
line-height: 2em;
}
#webshop #content_wrap #product_list article .btm .col_l {
width: 440px;
}
#webshop #content_wrap #product_list article .btm .col_r {
width: 440px;
}
}
body.modal {
width: 100vw;
height: 100vh;
overflow: hidden !important;
}
#modal {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-item: center;
position: fixed;
top: 0;
left: 0;
z-index: 65535;
}
#modal .overlay {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .85);
z-index: 1;
position: fixed;
top: 0;
left: 0;
cursor: pointer;
}
#modal .modal_inner {
width: 100%;
height: 100%;
display: flex;
align-items: center;
position: relative;
z-index: 2;
pointer-events: none;
}
#modal .modal_inner .ph {
width: 100%;
height: 100%;
padding: 40px 100px;
max-width: 860px;
max-height: 860px;
margin: 0 auto;
box-sizing: border-box;
position: relative;
z-index: 3;
}
#modal .modal_inner .ph .bg_inner {
background-size: contain;
}
@media screen and (min-width: 1280px) {
}
@media screen and (min-width: 751px) and (max-width: 1050px) {
}
.onResize * {
transition: inherit !important;
}
.onResize *:before, .onResize *:after {
transition: inherit !important;
}