@charset "utf-8";

/* --------------------------------------------------------
//IE用のハックは下記の様に要素の最後に＼0を付ける（unicode）
CSSの文字コードがShift-JISの場合はバックスラッシュが円マークになるので¥0を付ける
------------------------------------------------------ */
/* --------------------------------------------------------
レイアウト幅はstyle_common.css
.col1,.col2,.col3共に940px
------------------------------------------------------ */
/* --------------------------------------------------------
サイト全体の共通設定
------------------------------------------------------- */
* html body {
  background-image: none;
  background-color: #ffffff;
}

/* 大きな画像を要素内に収めるように自動縮小 */
/* 
img { 
width: 100%;
height: auto;
}
*/
/* 画像リンク透過 */
a:hover img {
  opacity: 0.6;
  filter: alpha(opacity=60);
  -ms-filter: "alpha( opacity=60 )";
}

/* loding-image */
.loadimg img {
  background-color: #ffffff;
  background-image: url("../img/loading/spinner.gif");
  background-repeat: no-repeat;
  background-position: center center;
}

/* --------------------------------------------------------
font
-------------------------------------------------------- */
/* type */
/* body { font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif; } */
body,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E",
    "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  /* font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif; */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* font-color */
body {
  color: #666;
}

.fc01 {
  color: #e51f19 !important;
}

.fc02 {
  color: #ad81b7 !important;
}

.fc03 {
  color: #5dbeaf !important;
}

.fc04 {
  color: #e188d7 !important;
}

/* link-color */
a:link {
  color: #e51f19;
  font-weight: bold;
  text-decoration: none;
}

a:visited {
  color: #e51f19;
  font-weight: bold;
  text-decoration: none;
}

a:hover {
  color: #e51f19;
  font-weight: bold;
  text-decoration: underline;
}

a:active {
  color: #e51f19;
  font-weight: bold;
  text-decoration: underline;
}

a.stay {
  text-decoration: underline;
}

/* font-size */
body {
  font-size: 1rem;
}

h1 {
  font-size: 1.6rem;
}

h2 {
  font-size: 1.4rem;
}

h3 {
  font-size: 1.4rem;
}

h4 {
  font-size: 1.4rem;
}

h5,
h6,
p {
  font-size: 1.4rem;
  line-height: 150%;
}

input,
select {
  vertical-align: middle;
}

th,
td,
li,
select,
input,
label,
dt,
dd,
time,
li {
  font-size: 1.2rem;
  text-decoration: none;
  line-height: 160%;
}

/* 改行 */
body,
h1,
h2,
h3,
h4,
h5,
p,
th,
td,
li,
select,
input,
label,
dt,
dd,
time,
li {
  word-break: normal;
}

/* 文字サイズ調整 20231030 */
.text_l h3 {
  font-size: 1.6rem;
  font-weight: bold;
}

.text_l p {
  font-size: 1.4rem;
  line-height: 180%;
}

/* --------------------------------------------------------
w100%
-------------------------------------------------------- */
/* 横幅いっぱい前提条件の記述 */
html {
  overflow: auto;
}

body {
  overflow: hidden;
}

#main-contents {
  box-sizing: border-box;
  width: 100%;
}

/* 横幅いっぱいに広げる要素を下に追加 #ct01〜 */
/* 
 { 
  margin-left: -100%;
  margin-right: -100%;
  padding-left: 100%;
  padding-right: 100%;
}
*/
/* --------------------------------------------------------
hd
-------------------------------------------------------- */
#header {
  height: 300px;
  background-image: url("../img/hd_web_orechostudio6.jpg");
  background-size: auto 100%;
  background-position: center center;
  background-repeat: repeat-x;
}

#header h1 a {
  display: block;
  text-indent: 100%;
  /* 文字非表示 */
  white-space: nowrap;
  /* 文字非表示 */
  overflow: hidden;
  /* 文字非表示 */
  width: 300px;
  height: 300px;
  margin: 0 auto;
}

/* --------------------------------------------------------
ft
-------------------------------------------------------- */
footer {
  border-top: 1px solid #ddd;
  background-color: #fbfbfb;
  padding: 20px 0;
}

footer p {
  font-size: 1.2rem;
  text-align: center;
}

/* --------------------------------------------------------
パン屑ナビ
-------------------------------------------------------- */
#bread {
  clear: both;
  font-size: 1.2em;
  margin: 2em 0;
  padding: 0.25em 0.5em;
  background: #fff;
  border-top: 1px solid #666;
  border-bottom: 1px solid #666;
}

#bread li {
  display: inline;
  margin-right: 0.5em;
  line-height: 1.8;
  text-align: right;
  list-style: none;
}

#bread li a {
  padding-right: 1.5em;
  background: url(../img/icon/icon-brc.gif) center right no-repeat;
}

/* --------------------------------------------------------
ct
-------------------------------------------------------- */
.ctbox01,
.ctbox02,
.ctbox03,
.ctbox04,
.ctbox05 {
  padding: 5em 0;
}

.ctbox01 {
  text-align: center;
}

.ctbox01 h2 {
  font-size: 2rem;
  margin-bottom: 2em;
}

.ctbox01 p {
  font-size: 1.4rem;
}

.ctbox02 h3 {
  font-weight: bold;
  margin-bottom: 0.6em;
}

.ctbox02 p {
  margin-bottom: 0.3em;
}

.ctbox02 span {
  padding-left: 1em;
}

.ctbox04 .text {
  border-bottom: 1px solid #666;
  margin-bottom: 3em;
}

/* profile_a-box */
#profile .box00 {
  padding-bottom: 2em;
  border-bottom: 1px solid #666;
  margin-bottom: 3em;
  float: left;
}

#profile .box01 {
  width: 440px;
  padding-right: 10px;
  float: left;
}

#profile .box02 {
  width: 480px;
  padding-left: 20px;
  float: right;
}

.profilephoto {
  margin: 4.5rem auto;
  text-align: center;
}

.profilephoto img {
  width: 55%;
  margin: 0 auto;
}

/* info20221010 */
ul.info_imgbox {
  text-align: center;
  margin-top: 4rem;
}

ul.info_imgbox li {
  width: 40%;
  display: inline-block;
}

/* profile20230513 */
#profile p {
  line-height: 180%;
}

/* -------------------------------------------------------------------
gallery
下記の様にaタグベースでデザインをしているのは
.thumbox内の構造は変更するとnext,backの繋がりが外れる為
------------------------------------------------------------------- */
.categorybox {
  padding-bottom: 2em;
  border-bottom: 1px solid #666;
  margin-bottom: 3em;
}

.thumbox {
  overflow: hidden;
  height: 100%;
}

.thumbox a {
  display: block;
  width: 132px;
  height: 85px;
  padding: 2px;
  border: 2px solid #ffffff;
  float: left;
  background-color: #ffffff;
  margin: 0 20px 20px 0;
}

/* 6つめで改行マージン調整 */
.thumbox a:nth-child(6n) {
  margin: 0 0 20px 0;
}

/* 非表示 */
.thumbox a figure {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.thumbox a figure br {
  display: none;
}

.link-c01 a:hover {
  display: block;
  padding: 2px;
  border: 2px solid #e51f19;
}

.link-c02 a:hover {
  display: block;
  padding: 2px;
  border: 2px solid #ad81b7;
}

.link-c03 a:hover {
  display: block;
  padding: 2px;
  border: 2px solid #5dbeaf;
}

.link-c04 a:hover {
  display: block;
  padding: 2px;
  border: 2px solid #e188d7;
}

/* exhibition20231030 将来的に他も */
.thumbox.thum_l a {
  display: inline-block;
  width: calc(33% - 2.5rem);
  height: auto;
  padding: 2px;
  border: 2px solid #ffffff;
  float: left;
  background-color: #ffffff;
  margin: 0 1.25rem 3rem;
}

/* 非表示 */
.thumbox.thum_l a figure {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: none;
}

.thumbox.thum_l a figure br {
  display: none;
}

/* -------------------------------------------------------------------
gallery popup
------------------------------------------------------------------- */
/* 背景カラー */
.pswp__bg {
  background: #000 !important;
  opacity: 0.85 !important;
}

/* キャプション幅 */
.pswp__caption__center {
  text-align: center !important;
  max-width: 940px !important;
  padding-top: 2.5em !important;
  padding-bottom: 3em !important;
  color: #fff !important;
}

/* ブロック毎色分け削除 */
.pswp__top-bar,
.pswp__caption,
.pswp__ui--fit .pswp__top-bar,
.pswp__ui--fit .pswp__caption {
  background: none !important;
}

/* サムネイル拡大表示を非表示 */
.pswp__zoom-wrap img.pswp__img--placeholder {
  display: none !important;
}

.pswp__zoom-wrap .pswp__img {
  background-color: #fff !important;
}

/* -------------------------------------------------------------------
title
------------------------------------------------------------------- */
/* All */
#ct02 h2 img,
#ct03 h2 img,
#ct04 h2 img,
#ct05 h2 img,
#ct06 h2 img,
#ct07 h2 img {
  width: 275px;
  height: auto;
}

/* Info */
#ct02 .titleline {
  margin-top: -1px;
  margin-bottom: 2em;
  border-bottom: 1px solid #666;
}

/* Design work */
#ct03 .titleline {
  margin-top: -15px;
  margin-bottom: 2em;
  border-bottom: 1px solid #666;
}

/* Plofile */
#ct04 .titleline {
  margin-top: -1px;
  margin-bottom: 1.5em;
  border-bottom: 1px solid #666;
}

/* Contact */
#ct05 .titleline {
  margin-top: 0px;
  margin-bottom: 1.5em;
  border-bottom: 1px solid #666;
}

/* Art work */
#ct06 .titleline {
  margin-top: -4px;
  margin-bottom: 1.5em;
  border-bottom: 1px solid #666;
}

/* Exhibition */
#ct07 .titleline {
  margin-top: -1px;
  margin-bottom: 1.5em;
  border-bottom: 1px solid #666;
}

.stitle {
  margin: 2em 0;
}

/* --------------------------------------------------------
gn
-------------------------------------------------------- */
/* 両端まで背景 */
#global-nav {
  background-color: #a5a5a5;
}

/* w幅まで背景 */
#global-nav-in {
}

#global-nav nav {
  display: block;
}

/* メニューロゴボタンを非表示 */
#global-nav .btn-gnav {
  background-color: #a5a5a5;
  display: none;
}

/* ドロップダウン表示非表示切り替えブロック */
#global-nav .menu-wrap {
  display: block;
}

#global-nav nav ul {
  text-align: center;
}

#global-nav nav li {
  position: relative;
  display: inline-block;
  margin: 0;
}

#global-nav nav li {
  white-space: nowrap;
}

/* メニューのデザイン */
#global-nav nav li a {
  display: block;
  padding: 1.5em 1.75em;
  color: #fff;
  /* メニューのフォントの色  */
  text-decoration: none;
  font-weight: normal;
  letter-spacing: 0.05em;
  border-right: 0px solid #000;
  /* メニュー上のラインの設定 */
}

/* すでに訪れたリンクの背景色 */
#global-nav nav li a:link,
#global-nav nav li a:visited {
  background-color: #a5a5a5;
}

/* マウスカーソルを乗せた時の背景色 */
#global-nav nav li a:hover,
#global-nav nav li a:active {
  background-color: #8f8f8f;
  color: #fff;
}

/* 滞在中のページの背景色 */
#global-nav nav li.stay a,
#global-nav nav li.stay a {
  color: #ffffff;
  background-color: #8f8f8f;
}

/* ドロップダウンメニューのデザイン */
#global-nav nav li ul {
  display: none;
  position: absolute;
  top: 95%;
  /* 100%が望ましいがこれ以上にすると意図しない隙間が出来る */
  left: 0;
  width: 12em;
  margin: 0;
  padding: 0;
}

#global-nav nav li ul li {
  margin: 0;
  padding: 0;
  width: 22em;
  border-top: none;
  border-bottom: 1px solid #272727;
  white-space: normal;
}

#global-nav nav li ul li a {
  display: block;
  padding: 1.1em 2em;
}

#global-nav nav li ul.children li a {
  background-color: #383838;
}

#global-nav nav li ul.children li a:hover {
  background-color: #414141;
}

#global-nav nav li li a:link,
#global-nav #menu li li a:visited {
  background-color: #fcd5d7;
}

#global-nav nav li ul ul {
  top: 0;
  left: 100%;
}

/* ドロップダウン表示非表示切り替え */
#global-nav .showMenu {
  display: block !important;
}

/* ページ上部に固定 */
.fixed {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2;
}

/* ページ上部fix時にロゴを表示 */
#global-nav nav li.logo {
  display: none;
}

.fixed #global-nav nav li.logo {
  display: inline-block;
  margin-top: 1.2em;
  padding-right: 2em;
}

.fixed #global-nav {
  opacity: 0.9;
}

#global-nav nav li:first-child a {
  display: block;
  width: 145px;
  height: 20px;
  padding: 0;
}

#global-nav nav li:first-child a:hover,
#global-nav nav li:first-child a:active {
  background-color: transparent;
}

/* SP用Topリンク非表示 */
#global-nav nav li.sp-top {
  display: none;
}

/* -------------------------------------------------------------------
line
------------------------------------------------------------------- */
.line01 {
  background: url() repeat 0px -0px;
  background-color: #000000;
  width: 940px;
  height: 1px;
  margin: 10px 0 50px 0;
  display: block;
  border: 0;
  text-indent: -99999px;
  overflow: hidden;
}

.line02 {
  background: url() repeat 0px -0px;
  background-color: #000000;
  width: 940px;
  height: 1px;
  margin: 20px 0 20px 0;
  display: block;
  border: 0;
  text-indent: -99999px;
  overflow: hidden;
}

.line03 {
  background: url() repeat 0px -0px;
  background-color: #e2e2e2;
  width: 940px;
  height: 1px;
  margin: 20px 0 10px 0;
  display: block;
  border: 0;
  text-indent: -99999px;
  overflow: hidden;
}

/* -------------------------------------------------------------------
フォーム
------------------------------------------------------------------- */
#formWrap {
  margin-bottom: 5rem;
}

/* テーブルパーツ */
.table1 {
  width: 90%;
  margin: 3rem auto 1.5rem;
}

.table1 th {
  width: 20%;
  padding: 1.5rem 1rem;
  vertical-align: middle;
}

.table1 td {
  width: 80%;
  padding: 1.5rem 1rem;
  text-align: left;
}

.form-text01 {
  width: 100%;
  padding: 1rem;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 14px;
  font-size: 1.4rem;
  color: #333333;
  border: 0;
  border: solid 1px #ccc;
  -moz-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
}

.form-text01:focus {
  border: solid 1px #939393;
  -moz-box-shadow: inset 0 0 4px #939393;
  -webkit-box-shadow: inset 0 0 4px #939393;
}

.submit_btn {
  text-align: center;
}

.submit_btn input,
.submit_btn_cart02 input {
  border: 0;
  padding: 1.5rem 7rem;
  background-color: #746f6c;
  color: #ffffff;
  font-size: 14px;
  text-align: center;
}

.submit_btn input:hover,
.submit_btn_cart02 input:hover {
  border: 0;
  padding: 1.5rem 7rem;
  background-color: #cccccc;
  color: #ffffff;
  cursor: pointer;
}

/* 確認画面 */
.formTable {
  width: 90%;
  margin: 3rem auto;
}

.formTable th {
  width: 20%;
  padding: 1.5rem;
  vertical-align: middle;
  background: #efefef;
  text-align: left;
  border: 1px solid #ccc;
}

.formTable td {
  width: 80%;
  padding: 1.5rem;
  font-size: 14px;
  text-align: left;
  border: 1px solid #ccc;
}

.error_messe {
  font-size: 14px;
  text-align: center;
  margin-bottom: 1rem;
}

#formWrap .btnbox {
  width: 40%;
  margin: 0 auto;
}

/* --------------------------------------------------------
Viw all
-------------------------------------------------------- */
.viwall {
  text-align: right;
  margin-right: 2rem;
  margin-top: 3rem;
}

.viwall a {
  color: #666;
  padding: 5px 3px 5px 10px;
}

.sankaku {
  display: inline-block;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-left: 10px solid #666;
  margin-left: 7px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

.viwall a:hover {
  color: #fff;
  background-color: #666;
  text-decoration: none;
}

.viwall a:hover .sankaku {
  border-left: 10px solid #fff;
}

/* --------------------------------------------------------
Top一覧
-------------------------------------------------------- */
.index .categorybox {
  border-bottom: 0px solid #666;
  margin-bottom: 1em;
}

.index .ctbox03,
.index .ctbox06 {
  padding: 2.5em 0;
}

/* --------------------------------------------------------
サイトトップへ
-------------------------------------------------------- */
.page-top {
  position: fixed;
  width: 35px;
  right: 65px;
  bottom: 20px;
  z-index: 99;
  color: #ffffff;
  line-height: 1;
  text-align: left;
}

* html .page-top {
  display: none;
}

.page-top a {
  display: block;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}

.page-top a:link,
.page-top a:visited {
  background: url("../img/bg-pagetop.png") no-repeat #666;
  background-size: contain;
  color: #ffffff;
  opacity: 0.4;
}

.page-top a:hover,
.page-top a:active {
  background: url("../img/bg-pagetop.png") no-repeat #666;
  background-size: contain;
  color: #ffffff;
  opacity: 0.8;
}

/* --------------------------------------------------------
SNSリンク追加
-------------------------------------------------------- */
/* SNS */
#header-nav ul.social-nav {
  padding: 1em;
  text-align: center;
  margin-top: 5rem;
  margin-bottom: -1rem;
}

#header-nav ul.social-nav li {
  background-color: inherit;
  margin-top: 0;
  width: inherit;
  display: inline-block;
  vertical-align: bottom;
  vertical-align: -webkit-baseline-middle;
}

#header-nav ul.social-nav li a {
  color: #666;
  font-size: 2.4rem;
  padding: 1.5rem 1.75rem;
}

#header-nav ul.social-nav li a:hover {
  opacity: 0.6;
  filter: alpha(opacity=60);
  -ms-filter: "alpha( opacity=60 )";
}

#header-nav ul.social-nav li a img {
  width: 2.4rem;
  height: auto;
  vertical-align: text-bottom;
}

#footer-nav ul.social-nav {
  padding: 1em;
  text-align: center;
}

#footer-nav ul.social-nav li {
  background-color: inherit;
  margin-top: 0;
  width: inherit;
  display: inline-block;
  vertical-align: bottom;
  vertical-align: -webkit-baseline-middle;
}

#footer-nav ul.social-nav li a {
  color: #666;
  font-size: 2.4rem;
  padding: 1.5rem 1.75rem;
}

#footer-nav ul.social-nav li a:hover {
  opacity: 0.6;
  filter: alpha(opacity=60);
  -ms-filter: "alpha( opacity=60 )";
}

#footer-nav ul.social-nav li a img {
  width: 2.4rem;
  height: auto;
  vertical-align: text-bottom;
}

/* --------------------------------------------------------
言語切替リンク追加
-------------------------------------------------------- */
.la-swich {
  text-align: right;
}

.la-swich span {
  display: inline-block;
  margin: 3rem 0.75rem 0;
  padding: 0.1rem 1.5rem;
  border: 1px solid #ffffff77;
  color: #666;
  background-color: #ffffff77;
  font-size: 1.2rem;
  font-weight: 600;
  text-align: center;
}

.la-swich span:hover,
.la-swich span.stay {
  border: 1px solid #8f8f8f;
  color: #fff;
  background-color: #8f8f8f;
}

/* --------------------------------------------------------
作品詳細内でのリンク追加
-------------------------------------------------------- */
.js_link {
  cursor: pointer;
}

.js_link:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------
Exhibition追加 20231030
-------------------------------------------------------- */
#ct07 section {
  margin-bottom: 4rem;
}

#ct07 h3 {
  margin-bottom: 2rem;
}

ul.dm_imgbox {
  text-align: center;
}

ul.dm_imgbox li {
  width: 50%;
  display: inline-block;
}

.iframe-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}