@charset "utf-8";
/*==============================
COMMON
==============================*/
body { font-size: 14px; color: #333333; font-family: "Century Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; letter-spacing: 0.05em; text-align: center; line-height: 180%; word-break: normal; -webkit-text-size-adjust: 100%; }
a { color: #e43831; text-decoration: none; }
body#history a { color: #f29f2c; }
body#look a { color: #4aac40; }
body#try a { color: #3372b3; }
body#contact a { color: #ff85e7; }
a:hover, a:active { color: #333333; }
a:hover img { filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; filter: none !important; }
section { margin-bottom: 50px; }
section p { margin-bottom: 20px; text-align: justify; }
strong { font-weight: bold; }
.align-center { text-align: center; }
.align-right { text-align: right; }
.note { text-indent: -1em; padding-left: 1em; }
.note span { color: #e43831; }
/* hx */
h1#logo { margin-bottom: 50px; }
h2.title { padding: 30px 0; text-align: center; }
h3 { display: inline-block; margin-bottom: 30px; padding: 20px 0; font-size: 143%; background: url(/images/common/bg_h3.png) repeat-x left bottom; line-height: 150%; }
h4 { padding: 10px 0; font-size: 115%; font-weight: bold; }
h5 { font-weight: bold; }
/* ul */
section ul { margin-bottom: 20px; }
section ol { margin-left: 20px; }
section ul li,
section ol li { margin-bottom: 10px; }
.circle { margin-left: 20px; list-style-type: disc; }
.columns > li { float: left; }
.large2 li { width: 50%; }
.large3 li { width: 33.3%; }
.list-disc { list-style-type: disc; margin-left: 20px; }
/* table */
.table { display: table; margin-bottom: 20px; width: 100%; }
.table dl { display: table-row; }
.table dl dt { display: table-cell; padding: 20px 20px 20px 0; vertical-align: top; white-space: nowrap; font-weight: bold; overflow: hidden; }
.table dl dd { padding: 20px; padding: 20px 0 20px 20px; }
/* header */
#container-header { margin: 50px auto; width: 1000px; position: relative; text-align: center; }
/* navigation */
#grobal-nav { margin: 0 auto; text-align: center; width: 782px; height: 45px; background: url(/images/common/nav_global.png?150704) no-repeat; }
#grobal-nav ul li { float: left; margin-right: 50px; padding: 0; }
#grobal-nav ul li.contact { margin-right: 0; }
#grobal-nav ul li a { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; }
#grobal-nav ul li a:hover,
#grobal-nav ul li a.active { background-image: url(/images/common/nav_global.png?150704); }
#grobal-nav ul li.top { display: none; }
#grobal-nav ul li.about a { width: 186px; height: 45px; }
#grobal-nav ul li.history a { width: 153px; height: 45px; }
#grobal-nav ul li.look a { width: 71px; height: 45px; }
#grobal-nav ul li.try a { width: 66px; height: 45px; }
#grobal-nav ul li.contact a { width: 106px; height: 45px; }
#grobal-nav ul li.about a:hover,
#grobal-nav ul li.about a.active { background-position: 0px -45px; }
#grobal-nav ul li.history a:hover,
#grobal-nav ul li.history a.active { background-position: -236px -45px; }
#grobal-nav ul li.look a:hover,
#grobal-nav ul li.look a.active { background-position: -439px -45px; }
#grobal-nav ul li.try a:hover,
#grobal-nav ul li.try a.active { background-position: -560px -45px; }
#grobal-nav ul li.contact a:hover,
#grobal-nav ul li.contact a.active { background-position: -676px -45px; }
#sns-nav { position: absolute; right: 0; top: 0; }
#sns-nav ul li { float: left; margin-left: 20px; }
#mobile-bar { display: none; }
/* footer */
#container-footer { margin: 0 auto 50px; width: 1000px; text-align: center; }
#pagetop { margin-bottom: 30px; }
#copyright { font-size: 72%; }
/* container */
#container { width: 100%; }
#container-contents { margin: 0 auto 100px; width: 780px; text-align: left; }
.columns { float: left; padding: 0 10px; }
.pho-left img { float: left; margin-right: 20px; }
.pho-right img { float: right; margin-right: 20px; }
.gray-box { margin-bottom: 30px; padding: 20px; background: #F8F8F8; }
.gray-box p, .gray-box ul, .gray-box ol { margin-bottom: 0; }
/*==============================
HOME
==============================*/
body#home #container-contents { margin: 0 auto 100px; width: 1000px; text-align: left; }
body#home .column2 { width: 480px; }

#slider { margin: 0 auto 50px; }
body#home #slider img { width: 100vw; height: auto; }
#news-list { position: relative; line-height: 130%; }
#news-list ul { margin: 0; font-size: 86%; }
#news-list li { margin: 0; width: 100%; border-bottom: 1px solid #e3e8ec; }
#news-list li a { display: block; padding: 10px; color: #333333; }
#news-list li a:hover { background: #F8F8F8; }
#news-list li p { margin: 0; }
#news-list li .news-title { margin-bottom: 10px; font-weight: bold; font-size: 14px; }
#news-list li .news-title span { display: block; margin-bottom: 5px; font-size: 11px; font-weight: bold; }
#news-list .more { display: block; margin: 10px 0 0; text-align: center; }
.banner-journal { display: block; margin-bottom: 30px; text-align: center; }
.banner-journal a:first-of-type { display: block; margin-bottom: 10px;}
/*==============================
ABOUT
==============================*/

/*==============================
HISTORY
==============================*/
.page-menu { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 20px; }
#history-list h4 { display: block; margin-bottom: 20px; padding: 0; background: none; text-align: center; }
#history-list ul { margin: 0 30px 20px; }
#history-list li { margin-bottom: 20px; padding-bottom: 30px; text-align: center; background: url(/images/history/bg_list.png) no-repeat bottom center; }
#history-list li span { margin-right: 10px; font-weight: bold; }
.movie { display: block; text-align: center; }
.movie video, .movie iframe { max-width: 740px; width: 100%; height: auto; aspect-ratio: 16/9; }
/*==============================
LOOK
==============================*/
.lot { margin: 0 auto; width: 780px; height: 500px; position: relative; background: url(/images/pages/bg_box.png) no-repeat; }
.lot img { position: absolute; left: 268px; top: 171px; cursor: pointer;
  -webkit-animation: spin .3s linear infinite;
  -moz-animation: spin .3s linear infinite;
  -ms-animation: spin .3s linear infinite;
  -o-animation: spin .3s linear infinite;
  animation: spin .3s linear infinite; }
@-webkit-keyframes spin {
  0% {-webkit-transform: rotate(0deg);}
  25% {-webkit-transform: rotate(10deg);}
  50% {-webkit-transform: rotate(0deg);}
  75% {-webkit-transform: rotate(-10deg);}
  100% {-webkit-transform: rotate(0deg);}
}
@-moz-keyframes spin {
  0% {-moz-transform: rotate(0deg);}
  25% {-moz-transform: rotate(10deg);}
  50% {-moz-transform: rotate(0deg);}
  75% {-moz-transform: rotate(-10deg);}
  100% {-moz-transform: rotate(0deg);}
}
@-ms-keyframes spin {
  0% {-ms-transform: rotate(0deg);}
  25% {-ms-transform: rotate(10deg);}
  50% {-ms-transform: rotate(0deg);}
  75% {-ms-transform: rotate(-10deg);}
  100% {-ms-transform: rotate(0deg);}
}
@-o-keyframes spin {
  0% {-o-transform: rotate(0deg);}
  25% {-o-transform: rotate(10deg);}
  50% {-o-transform: rotate(0deg);}
  75% {-o-transform: rotate(-10deg);}
  100% {-o-transform: rotate(0deg);}
}
@keyframes spin {
  0% {transform: rotate(0deg);}
  25% {transform: rotate(10deg);}
  50% {transform: rotate(0deg);}
  75% {transform: rotate(-10deg);}
  100% {transform: rotate(0deg);}
}
.show { margin: 0; text-align: center; }
.show li { display: inline-block; margin: 0 20px 0 0; line-height: 220%; }
.show li a { display: block; padding-left: 40px; height: 30px; color: #333333 !important; }
.show .show-lot a { background-image: url(/images/pages/btn_show_lot.png); background-repeat: no-repeat; }
.show .show-images a { background-image: url(/images/pages/btn_show_images.png); background-repeat: no-repeat; }
.show .show-words a { background-image: url(/images/pages/btn_show_words.png); background-repeat: no-repeat; }
.show .show-lot:hover a, .show .active a,
.show .show-images:hover a, .show .active a,
.show .show-words:hover a, .show .active a { background-position: 0 -30px; cursor: pointer; color: #4aac40 !important }
.list-images-year { display: flex; flex-wrap: wrap; gap: 5px 10px; }
.list-images-year .active a { color: #333333; font-weight: bold; }
/*==============================
LOOK IMAGES
==============================*/
#look-list { margin-top: 30px; overflow: hidden; }
#look-list li { float: left; width: 20%; }
#look-list li img { width: 100%; height: auto; }
#look-list .mix{ display: none; }
.controls ul { margin-bottom: 10px; }
.controls li { display: inline-block; margin: 0 5px 5px 0; }
.controls li span { display: block; padding: 0 10px; color: #999999; border: 1px solid #999999; border-radius: 5px; }
.controls li span:hover,
.controls li.active span { color: #FFFFFF !important; background: #999999; cursor: pointer; }
.controls li span.red { color: #e43831; border: 1px solid #e43831; }
.controls li span.red:hover,
.controls li.active span.red { background: #e43831; }
.controls li span.orange { color: #f29f2c; border: 1px solid #f29f2c; }
.controls li span.orange:hover,
.controls li.active span.orange { background: #f29f2c; }
.controls li span.green { color: #4aac40; border: 1px solid #4aac40; }
.controls li span.green:hover,
.controls li.active span.green { background: #4aac40; }
.controls li span.blue { color: #3372b3; border: 1px solid #3372b3; }
.controls li span.blue:hover,
.controls li.active span.blue { background: #3372b3; }
.controls li span.pink { color: #ff85e7; border: 1px solid #ff85e7; }
.controls li span.pink:hover,
.controls li.active span.pink { background: #ff85e7; }
/*==============================
LOOK WORDS
==============================*/
.contents-words { margin-bottom: 20px; }
.contents-words h4 { padding: 30px 40px 0 10px; font-size: 114%; background: url(/images/common/bg_h4.png) repeat-x left top; position: relative; cursor: pointer; }
.contents-words h4:after { content: ''; display: inline-block; width: 19px; height: 12px; position: absolute; bottom: 12px; right: 10px; background: url(/images/common/btn_words.png) no-repeat left top; }
.open h4:after { background-position: 0 -12px !important; }
.contents-words ul { display: none; margin: 10px 10px 0; }
.contents-words ul li { margin: 0 0 5px; }
/*==============================
TRY
==============================*/
.term { margin-bottom: 30px; border: 2px solid #3372b3; color: #3372b3; }
.term dt { display: inline-block; padding: 10px 20px; background: #3372b3; color: #FFFFFF; font-weight: bold; }
.term dd { display: inline-block; padding: 10px 20px; }
/*==============================
CONTACT
==============================*/
#form input { display: block !important; }
input[type="text"], input[type="email"], textarea { margin: 0 5px 10px 0; padding: 10px; background: #F8F8F8; border: none; position: relative; font-size: 14px; color: #333333; }
input[type="submit"] { display: inline-block; width: 475px; height: 55px; border: none; text-indent: 120%; white-space: nowrap; overflow: hidden; background: url(/images/common/btn_submit.png) no-repeat; }
input[type="submit"]:hover { cursor: pointer; filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; filter: none !important; }
#form .important { margin-left: 10px; font-size: 86%; color: #ff85e7; }
#form label { margin-right: 20px; }
#form label:hover { cursor: pointer; }
.wpcf7-not-valid-tip { display: inline-block; padding: 3px 10px; background: #ff85e7; color: #FFFFFF; }
.screen-reader-response,
.wpcf7-mail-sent-ok,
.wpcf7-validation-errors
 { margin: 20px 0; padding: 0 10px; color: #ff85e7; text-align: center; }
 .screen-reader-response ul { display: none; }
/* iCheck plugin Square skin, red */
.icheckbox_square-red, .iradio_square-red {
display: inline-block; *display: inline; vertical-align: middle; margin: 0; padding: 0; width: 22px; height: 22px; background: url(/images/common/red.png) no-repeat; border: none; }
.icheckbox_square-red { background-position: 0 0; }
.icheckbox_square-red.hover { background-position: -24px 0; }
.icheckbox_square-red.checked { background-position: -48px 0; }
.icheckbox_square-red.disabled { background-position: -72px 0; cursor: default; }
.icheckbox_square-red.checked.disabled { background-position: -96px 0; }
.iradio_square-red { background-position: -120px 0; }
.iradio_square-red.hover { background-position: -144px 0; }
.iradio_square-red.checked { background-position: -168px 0; }
.iradio_square-red.disabled { background-position: -192px 0; cursor: default; }
.iradio_square-red.checked.disabled { background-position: -216px 0; }
/* HiDPI support */
@media (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
  .icheckbox_square-red, .iradio_square-red {
    background-image: url(/images/common/red@2x.png); -webkit-background-size: 240px 24px; background-size: 240px 24px;
  }
}
/*==============================
NEWS
==============================*/
.news-title a { color: #333333; }
.date { margin: 0; font-size: 86%; text-align: right; }
.sns-btn { margin: 0; text-align: right; }
.sns-btn li { display: inline-block; margin: 0; }
.twitter-share-button { width: 110px !important; }
.fb_iframe_widget { display: inline-block; position: relative; }
.fb_iframe_widget > span { vertical-align: baseline !important; }
#pager { text-align: center; }
#pager li { display: inline-block; margin: 0 10px; }
#pager li a { display: block; width: 52px; height: 30px; text-indent: 100%; white-space: nowrap; overflow: hidden; }
#pager li a:hover { filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; }
#pager li.prev { background: url(/images/common/btn_prev.png) no-repeat; }
#pager li.next { background: url(/images/common/btn_next.png) no-repeat; }
#pager li.all { background: url(/images/common/btn_all.png) no-repeat; }

body#news .information { margin-bottom: 30px; padding: 20px; background: #F8F8F8; }
body#news .information dl dt { float: left; width: 100px; padding: 10px; font-weight: bold; }
body#news .information dl dd { padding: 10px 0 10px 120px; }
body#news .information dl p { margin-bottom: 0; }
body#news .table dl dt { padding: 5px 0; }
body#news .table dl dd { padding: 5px 0 5px 20px; }