@charset "UTF-8";
/* ---------------------------------------------

	三浦知良特設サイト │ 共通common	
	
---------------------------------------------- */
html {
	font-size: 62.5%;
}
body {
	color: #393636;
	background-color: #ffffff;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 500;
	position: relative;
	font-size: 14px;
	line-height: 1.0;
	-webkit-text-size-adjust: 100%;
	word-wrap: break-word;
	overflow-wrap: break-word;
	width: 100%;
	margin: 0;
}
body.open, 
html.open {
	/*メニュー展開時の背景スクロール止める */
	overflow: hidden;
	height: 100%; /* iOSのスクロールバグ防止用*/
}
html.open {
	scrollbar-gutter: stable;
	/*スクロールバー有り無しによるガタ付き防止*/
}
body.open {
  position: fixed;
  width: 100%;
  /* JSから top: -XXXpx が付与されることで見た目の位置がズレなくなります */
}
*,
*::before,
*::after {
	box-sizing: border-box;
}
@media screen and (min-width: 768px) {
	body {
		font-size: 16px;
		min-width: inherit;
		min-width: auto;
	}
}
/* -------------------------------------
  共通
----------------------------------------*/
.mode_sp {
	display: block;
}
.mode_pc {
	display: none;
}
.mode_sps {
	display: none;
}
@media screen and (max-width: 430px) {
	.mode_sps {
		display: block;
	}
}
@media screen and (min-width:768px) {
	.mode_sp {
		display: none;
	}
	.mode_pc {
		display: block;
	}
}
.cf:after {
	content: "";
	clear: both;
	display: block;
}
img {
	max-width: 100%;
	vertical-align: bottom;
	height: auto;
}
.mover,
header a,
footer a {
	transition: opacity 0.2s ease-out;
}
.mover:hover,
header a:hover,
footer a:hover {
	opacity: 0.6;
	cursor: pointer;
}
a {
	color: inherit;
}
.inner {
	/*overflow: hidden;*/
	margin: 0 auto;
	max-width: 1234px;
	width: 88%;
	padding: 0;
}

/* -------------------------------------
  header
----------------------------------------*/
header {
	position: fixed;
	width: 100%;
	height: 66px;
	top: 0;
	z-index: 30;
	background-color: rgba(255, 255, 255, 1.0);
	box-sizing: border-box;
	font-family: "Zen Kaku Gothic Antique", sans-serif;
	padding: 8px 4.2%;
	text-align: center;
	margin: 0 auto;
	filter: none;
	align-items: flex-start;
}
header.open {
	height: 100%;
}
header .inner {
	max-width: 1100px;
	width: 100%;
}
header .logo {
	position: relative;
	z-index: 2;
	margin: 8px 0 12px 0;
	text-align: left;
}
header .logo a {
	display: block;
}
header .logo a img {
	height: auto;
	width: 77px;
}
header .text h1 {
	font-size: min(3.47vw, 21px);
	font-family: "Zen Kaku Gothic Antique", sans-serif;
	font-weight: 900;
	letter-spacing: 0.071em;
	line-height: 1.77;
	color: #3F3A39;
}
header .mode_sp {
	display: block;
}
header .mode_pc {
	display: none;
}
@media screen and (min-width: 900px) {
	/*900からPCメニュー*/
	header .mode_sp {
		display: none;
	}
	header .mode_pc {
		display: block;
	}
	header,
	header.open {
		height: 114px;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0;
		align-items: flex-start;
	}
	header.open {
		background-color: rgba(255, 255, 255, 0.9);
	}
	header .inner {
		margin-top: 22px;
		display: flex;
        align-items: center;
		justify-content: space-between;
	}
	header .logo {
		margin: 0;
	}
	header .logo a img {
        width: 140px;
        margin-left: 3px;
	}
	header .text {
		width: auto;
	}
	header .text h1 {
		font-size: min(1.95vw, 21px);
	}
}
@media screen and (max-width: 899px) {
	header .mode_sp {
		display: block;
	}
}
/*メニュー展開時・メニュー内*/
header.open {
	height: 100%;
	max-height: none;
	display: block;
	position: fixed;
	background-color: rgba(255, 255, 255, 1);
}
header.open .inner {
	align-items: flex-start;
}
header.open .text {
	display: none;
}
header.open .logo {
	justify-content: flex-start;
}
/*#contentNav*/
header #contentNav {
	margin: auto;	
	width: /*82*/75%;
	left: 0;
	right: 0;
    position: fixed;
    height: auto;
    overflow-y: auto; 
	display: none;
}
header.open #contentNav {
    height: 100%;
}
header #contentNav .navarea02 {
	display: none;
	/*padding: 1.8em 3.5% 7em 3.5%;*/
	padding-top: 1.8em;
	padding-bottom: 7em;
}
header.open #contentNav .navarea02 {
	display: block;
}
/*.navmenu02*/
header .navmenu02 {
	display: block;
	text-align: left;
}
header .navmenu02 > li {
	letter-spacing: 0.1em;
	font-weight: 900;
	color: #3F3A39;
	font-family: "Zen Kaku Gothic Antique", sans-serif;
	font-size: min(4.8vw, 18px);
	line-height: 1.46;
	letter-spacing: 0.1em;
	margin-bottom: 0;
}
header .navmenu02 > li > a {
	display: block;
	font-size: min(4vw, 15px);
	font-weight: 700;
	padding: 0.9em 0 0.5em 0;
	border-bottom: 2px solid #707070;
	padding-right: 2.6em;
	position: relative;
}
header .navmenu02 > li:nth-child(1) > a,
header .navmenu02 > li:nth-child(2) > a {
	font-size: min(4.8vw, 18px);
	font-weight: 900;
	letter-spacing: 0.16em;
}
header .navmenu02 > li:nth-child(3)  {
	padding-top: 30px;
}
header .navmenu02 > li > a::before {
	position: absolute;
	content: "";
	top: 0;
	bottom: 0;
	right: 1em;
	margin: auto 0;
	width: 6px;
	height: 10px;
	background-image: url(../img/icon_arrow02.svg);
	background-size: contain;
	background-repeat: no-repeat;
}
@media screen and (min-width: 900px) {
	header.open {
		padding: 0;
	}
	header.open .logo {
		margin: 0;
	}
	header #contentNav {
		display: block!important;
		height: auto;
		width: 100%;
		top: 77px;
		margin: auto;
	}
	header .navarea02 {
		/*padding-top: min(14vw, 140px);*/
		padding-top: min(3vw, 70px);
	}
	header .navmenu02 > li  {
		font-size: min(3.0vw, 30px);
		margin-bottom: 20px;
	}
	header .navmenu02 > li > a {
		font-size: min(2.6vw, 26px);
		padding: 0 0 13px 0;
		padding-right: 2.6em;
	}
	header .navmenu02 > li:nth-child(1) > a,
	header .navmenu02 > li:nth-child(2) > a {
		font-size: min(3.0vw, 30px);
		padding-top: 20px;
	}
	header .navmenu02 > li:nth-child(3)  {
		padding-top: 0.5em;
		margin-bottom: 1em;
	}
	header .navmenu02 > li > a::before {
		width: 11px;
		height: 17px;
	}
	header.open #contentNav .navarea02 {
		display: inline-block;
	}
}
/*#menu_btn*/
#menu_btn,
#menu_btn span {
	display: inline-block;
	transition: all .2s;
	box-sizing: border-box;
}
#menu_btn {
	position: absolute;
	z-index: 2;
	top: 10px;
	right: 2%;
	padding: 10px;
	cursor: pointer;
}
#menu_btn > div {
	position: relative;
	display: block;
	margin: auto;
	cursor: pointer;
	text-align: center;
	width: 31px;
	height: 15px;
}
#menu_btn span {
	position: absolute;
	right: 0;
    width: 100%;
    height: 1px;
    background-color: #3F3A39;
}
#menu_btn span:nth-of-type(1) {
	top: 1px;
}
header.open #menu_btn span:nth-of-type(1) {
	-webkit-transform: translateY(14px) rotate(-45deg);
	transform: translateY(14px) rotate(-45deg);
	top: -8px;
}
#menu_btn span:nth-of-type(2) {
    top: 8px;
}
header.open #menu_btn span:nth-of-type(2) {
	opacity: 0;
}
#menu_btn span:nth-of-type(3) {
	bottom: 0;
}
header.open #menu_btn span:nth-of-type(3) {
	-webkit-transform: translateY(-8px) rotate(45deg);
	transform: translateY(-8px) rotate(45deg);
}
@media screen and (min-width: 900px) {
	#menu_btn {
		display: block!important;
		z-index: 1;
		position: relative;
		top: 0;
		right: 3.5%;
	}
	#menu_btn > div {
		width: min(3.2vw, 46px);
		height: 22px;
	}
	#menu_btn span:nth-of-type(2) {
		top: 11px;
	}
	#menu_btn span:nth-of-type(1) {
		top: 0;
	}
	header.open #menu_btn span:nth-of-type(1) {
		top: 0;
	}
}
/*ヘッダーFix時の高さ分余白追加*/
.contentWrap {
	padding-top: 66px;
}
@media screen and (min-width: 900px) {
	.contentWrap {
		padding-top: 114px;
	}
}

/* -------------------------------------
  colorbox 
----------------------------------------*/
iframe.cboxIframe {
	background-color: black !important;
}
#cboxLoadedContent,
#cboxOverlay {
	background: #000 !important;
}
#cboxClose {
	cursor: pointer !important;
	background-image: url(../img/cbox_close.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	width: min(5vw, 55px);
	height: min(5vw, 55px);
	right: 0;
	top: -40px;
	z-index: 99999;
}

/*追加*/

/* 矢印ボタン・件数表示・スライドショーボタンをまとめて非表示 */
#cboxPrevious,
#cboxNext,
#cboxCurrent,
#cboxSlideshow {
  display: none !important;
}

/* 1. 外枠：高さのインラインスタイルを上書きして16:9を強制 */
#colorbox {
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
}
/* 2. 中のラッパー要素すべてを100%にする */
#cboxWrapper,
#cboxContent,
#cboxLoadedContent {
  height: 100% !important;
  aspect-ratio: 16 / 9;
  border: none;
}
/* 3. 中身のiframe自体も親いっぱいに広げる */
#cboxLoadedContent iframe {
  width: 100% !important;
  height: 100% !important;
  display: block;
  border: none;
}
/*colorbox.cssで指定された変な余白トル*/
#cboxContent {
    margin-top: 0px;
}
/* モーダル表示時の位置ずれ・アニメーションのブレを防止 */
#colorbox {
  /* top位置の急激な変化によるガタつきを防止 */
  transition: opacity 0.2s ease !important; 
}
/* もし全画面の中央に配置を固定したい場合 */
#colorbox {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}
/* CLOSEボタン黒背景の上にJSで配置移動の調整 */
#colorbox {
  overflow: visible !important;
}
/* -------------------------------------
  footer
----------------------------------------*/
footer {
	margin: 0 auto;
	width: 100%;
	padding: 92px 0 75px 0;
	background-color:#ffffff;
}
.logo_hitori {
	margin: 0 auto min(18.76vw, 100px) auto;
	width: 72%;
	max-width: 514px;
}
.logo_onodera {
	margin: 0 auto min(9.07vw, 90px) auto;
	width: 36.8%;
	max-width: 266px;
}
@media screen and (min-width: 768px) {
	footer {
		padding-top: 90px;
	}
}

/* -------------------------------------
  totop
----------------------------------------*/
#totop {
	position: fixed;
	bottom: 0;
	display: none;
	z-index: 29;
	width: 100%;
	height: 40px;
	opacity: 0.8;
	right: 0;
	left: 0;
	margin: auto;
	background-color: #f1f1f1;
	z-index: 100;
}
#totop img {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 21px;
}
@media screen and (min-width:768px) {
	#totop {
		right: 0;
		bottom: 3vh;
		left: auto;
		background-color: initial;
		width: 60px;
		height: 70px;
	}
}

/* -------------------------------------
  画像拡大 zoom
----------------------------------------*/
.imgZoom {
	cursor: pointer;
	/*max-width: 500px;*/
	overflow: hidden;
	width: 100%;
}
.imgZoom img {
	height: auto;
	transition: transform .6s ease;
}
.imgZoom:hover img {
	opacity: 1;	
	transform: scale(1.1);
}
.imgZoom:hover {
	opacity: initial;
}