/*
Theme Name: 2023
Theme URI: http://yumiasakura.com
Description: 朝倉由美サイトのテーマ2023
Version: 1
Author: Yumi Asakura
Author URI: http://yumiasakura.com
*/

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;500;700&family=Zen+Kaku+Gothic+New:wght@400;700&display=swap');

/****************************************
		Base
*****************************************/
.grecaptcha-badge {display: none!important;}
* {box-sizing: border-box;}
html {margin:0; padding:0;　height: 100vh;}
body { 
	margin:0; padding:0;
	background-color:#E8DEE1;
	font-family: 'Josefin Sans', 'Zen Kaku Gothic New', sans-serif;
	color:#3F485A; 
	font-size:12pt; 
	line-height:1.9; 
	letter-spacing:0.05em;
	height: 100dvh;
	scroll-behavior: smooth;
}
a {
	color:#3F485A; 
	text-decoration:none;
}
a:has(img) {
	border: none;
	background: transparent;
}
a:hover {color:#3F485A; opacity: 0.7;
  -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; text-decoration:none;}
.none {display:none;}
.clear {clear:both;}
.en {font-family: 'Josefin Sans', sans-serif;}
.cap {font-size: 70%; margin: 1em 0;}
img {
	width: 100%;
	height: auto;
}
img.h1em {
	height: .9em;
	 width: auto;
}
/* 下からフェードイン */
.fadeInUpTrigger{
	opacity: 0;
	transition: 2s;
}
.more-button {
	text-align: center;
}
/* 線の描写 */
.scrollleft {
	position: absolute;
    bottom: 1.5em;
	left: 5%;
}
@media only screen and (min-width: 600px) {
	.scrollleft {
		left: 30%;
	}
}
.scrollleft::after{
	content: "";
    /*描画位置*/
	position: absolute;
	top: 0;
    /*線の形状*/
	height: 1px;
	width: 30px;
	background: #3F485A;
    /*線の動き2秒かけて動く。永遠にループ*/
	animation: pathmove 2s ease-in-out infinite;
	opacity:0;
}
/*高さ・位置・透過が変化して線が左から右に動く*/
@keyframes pathmove{
	0%{
		width:0;
		left:0;
		opacity: 0;
	}
	30%{
		width:45px;
		opacity: 1;
	}
	100%{
		width:0;
		left:60px;
		opacity: 0;
	}
}
/* MOREボタン */
button.more {
	margin: 30px auto auto;
	background: #F7F6F5;
border: none;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
button.more a, .submit input {
	color: #959BA7;
	padding: 17px 22px 15px 22px;
	font-family: 'Josefin Sans', sans-serif;
	border: none;
	display: block;
}
button.more span { color: #3F485A;}
/* 表 */
table {
	    margin-top: 4em;
    background: #F7F6F5;
    font-size: 80%;
	    line-height: 1.7em;
	width: 100%;
}
@media only screen and (min-width: 600px) {
	table {
		margin: 4em auto;
	}
}
caption {
	text-align: left;
    margin-bottom: 1em;
	font-size: 120%;
}
th {
	padding: 1.5em;
    border-bottom: 1px solid #E8DEE1;
	text-align: left;
}
td {
    padding: 1.5em;
    border-bottom: 1px solid #E8DEE1;
}
.video {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;    
}
.video iframe,  
.video object,  
.video embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
input[type="submit"], input[type="button"] {
  appearance: none;
  -webkit-appearance: none;
  }
blockquote {position: relative; font-style:italic; opacity:0.7;}
blockquote:before, blockquote:after{position: absolute; color:#fff; font-size:4em; z-index:1;}
blockquote::before {content: "“"; top: -1em; left: 5%;}
blockquote::after {content: "”"; bottom: -1em; right: 5%;}
.twitter-tweet {margin:0 auto!important;}
.dotted {
  background-image: linear-gradient(to right, #3e3a39, #3e3a39  20%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%);
    background-size: 5px 5px;
    height: 1px;
}

@media only screen and (max-width: 599px) {
   body {font-size:0.8em;}
  .pc {display:none!important;}
  .phone {display:block!important;}
}
@media only screen and (min-width: 600px) {
  .phone {display:none!important;}
  .pc {display:block!important;}
}
/****************************************
		MAIN
*****************************************/
#main {
    padding: 8vh 10vw 0 5vw;
    width: 100%;
}
@media only screen and (min-width: 600px) {
	#main {
    padding: 16vh 20% 0 20%;
	}
}
/****************************************
		MENU OPEN
*****************************************/
/*サイドロゴ*************/
.side-logo {
	position: fixed;
	top: 40vh;
	right: 2.5vw;
	writing-mode: vertical-rl;
	font-size: 85%;
	letter-spacing: .02em;
	 z-index: 1;
}
/*OPENボタン*************/
.side-menu-btn {
    position: fixed;
    bottom: 60px;
    right: 2.7vw;
    width: 5vw;
    height: 55px;
    cursor: pointer;
    z-index: 3;
    display: block;
    background: url(img/menu.png) center bottom no-repeat;
    background-size: 90%;
    font-size: 80%;
    writing-mode: vertical-rl;
    padding-right: 0.2em;
}
.side-open .side-menu-btn {
	background: url(img/close.png) center bottom no-repeat;
	background-size: 100%;
}
/*to top*************/
.to-top {
	position: fixed;
    bottom: 0;
    right: 0;
    width: 9vw;
    height: 12vw;
    z-index: 1;
    display: block;
    text-align: center;
}
.to-top img {
	width: auto;
    height: 100%;
    margin: 0 auto;
}
/*メニューオープン時は非表示*************/
.side-open .to-top {
	display: none;
}
/* サイドオープン時にメインコンテンツを覆う部分 */
.overlay {
  content: '';
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
	height: 100%;
  height: 100dvh;
  background: rgba(0,0,0,0);
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  z-index: 3;
}
.side-open .overlay {
  visibility: visible;
  cursor: pointer;
  background: rgba(0,0,0,.7);
}
.side-open .overlay::after {
  visibility: visible;
  color: rgba(255,255,255,.8);
}
/* メインコンテンツ */
.wrapper {
  position: relative;
  width: 100%;
	height: 100%;
  height: 100dvh;
  background-color: #E8DEE1;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  z-index: 1;
}
/* サイドメニューオープン */
.side-open .wrapper,
.side-open .overlay {
  -webkit-transform: translate3d(-250px, 0, 0);
  transform: translate3d(-250px, 0, 0);
}
@media only screen and (min-width: 600px) {
	.side-logo {
	right: 21px;
	}
	.side-menu-btn {
	bottom: 75px;
	right: 21px;
	width: 16px;
	height: 65px;
    background-size: 100%;
    padding-right: 0;
	}
	.to-top {
	bottom: -10px;
	right: 27px;
	width: 3px;
	height: auto;
	}
	.to-top img {
	width: 100%;
    height: auto;
	}
}
/****************************************
		MENU （SIDE&FOOTER）
*****************************************/
.side-menu {
	display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 250px;
	height: 100dvh;
	background: #E8DEE1;
  z-index: 2;
	overflow: auto;
	padding: 110px 33px;
	font-size: 90%;
}
.side-open .side-menu {
	background: #F7F6F5;
	display: block;
} 
.side-menu h2 {
	padding: 0 22px 30px 22px;
	border-bottom: 1px solid #3F485A;
	margin-bottom: 50px;
	    font-size: 130%;
    font-weight: 400;
    letter-spacing: 0.4px;
    line-height: 1.4em;
}
.side-menu ul {
	padding-left: 22px;
}
.menu ul li {
	margin-bottom: 1em;
}
summary {
	cursor:pointer;
  display: block;
  list-style: none;
}
summary::-webkit-details-marker {
  display:none;
}
summary::after {
  content: url("img/right.svg");
    margin-left: 1em; 
   }
details[open] summary::after {
  content: url("img/down.svg");
}
.menu .cate_s {
	margin: .3em 0 2.5em .2em;
    padding: 2em 0 0 2em;
    font-size: 90%;
    border-left: 1px solid #B0B6C3;
	color: #959BA7;
  animation: fadeIn 0.5s ease;
}
details[open] .cate_s {
  animation: fadeIn 0.5s ease;
}
.menu-lomo {
font-family: "gill-sans-nova", sans-serif;
	font-weight: 900;
	font-style: normal;
    letter-spacing: -0.04em;
}
@keyframes fadeIn {
  0% {
    opacity: 0; /* 透明 */
    transform: translateY(-10px); /* 上から表示 */
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@media only screen and (min-width: 600px) {
	.side-menu {
		font-size: 80%;
	}
}
/****************************************
		Top
*****************************************/
.top-logo {
	    margin: 0 0 50px 5vw;
}
.top-logo h1 {
	font-size: 220%;
    font-weight: 400;
    letter-spacing: 0.5px;
    line-height: 1.2em;
    margin-bottom: 0.5em;
}
.top-logo p {
	margin-top: 1em;
	font-size: 80%;
	 letter-spacing: 0.3px;
}

/*スライダー*************/
.top-slider {	 
    margin-right: -10vw;
    overflow: hidden;
	    z-index: 5;
}
.swiper {
    width: 100%;
    height: auto;
}
.swiper img {
	width: 100%;
	height: calc((100vw - 30px) * 0.66);
	 object-fit: cover;
	border-radius: 20px 0 0 20px;
}
/*プログレスバー*************/
.progressbar{
 position: relative;
 width: 40%;
 height: 1px;
 margin-top: .5em;
 background: #B0B6C3;
	overflow: hidden;
	    float: right;
    margin-bottom: 5em;
}
.progressbar_in {
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  transform-origin: left center;;
  background: #3F485A;
  border-radius: 1px;
  transform: scaleX(0);
  transition-timing-function: linear;
	 z-index: 100;
}
@media only screen and (min-width: 600px) {
	.desktop-top {
		display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
	}
	.top-slider {	 
    margin-right: -60px;
	}
	.top-logo {
	    margin: 0 0 50px 0;
	}
	.top-slider {	 
    margin-right: 0;
    overflow: auto;
		width: 70%;
	}
	.swiper img {
	width: 100%;
	height: calc(45vw * 0.66);
	border-radius: 30px 0;
	}
}
/*WORKS ・　MY FAVORITE LIST*************/
p.top-concept {
	font-size: 80%;
	margin-bottom: 2em;
}
p.top-concept a {
	background: #F7F6F5;
	padding: 0 .3em;
}
.list {
	margin-bottom: 120px;
}
.list ul {
		display: flex;
    	flex-wrap: wrap;
		justify-content: space-between;
	}
.list ul li {
	width: 46%;
	margin-bottom: 2em;
}
.list h2 {
	 font-size: 120%;
    font-weight: 400;
	margin-bottom: 1em;
}
.list h3 {
	font-size: 60%;
	font-weight: 300;
	 margin-top: 0.1em;
    line-height: 1.6em;
}
.list .day {
	font-size: 80%;
	font-weight: 300;
	color: #959BA7;
}
.list img {
	border-radius: 1px;
}
@media only screen and (min-width: 600px) {	
	.list ul li {
        margin: 0 0 3em 0;
	}
	.list h3 {
		font-size: 75%;
	}
	.list .day {
		margin-bottom: 2em;
	}
}


/****************************************
		About
*****************************************/
.about section {
	padding-bottom: 80px;
	border-bottom: 1px solid #F7F6F5;
	margin-bottom: 2em;
}
.about section:last-of-type {
	border-bottom: none;
}
.about a {
	background: #F7F6F5;
	padding: 0 .3em;
}
.about .more a {
	background: transparent;
}
.profile img {
	width: 60px;
	margin-top: 1em;
	margin-bottom: 1em;
}
.about h2 {
	font-weight: normal;
	margin-bottom: 2em;
}
.about p {
	font-size: 90%;	
    line-height: 2.2em;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	text-align: justify;
}
.about details {
	margin-top: 1em;
}
.about summary {
    padding: 1em;
    background: #F7F6F5;
    margin-bottom: 1em;
	text-align: center;
}
@keyframes fadeIn {
  0% {
    opacity: 0; /* 透明 */
    transform: translateY(-10px); /* 上から表示 */
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.about details ul {
	padding: 0 3em 1.5em 3em;
	font-size: 90%;	
    line-height: 2em;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	text-align: justify;
	animation-name: fadeIn;
  animation-fill-mode:forwards;
  animation-duration:1s;
}
.about details ul li {
	padding-left: 0.3em;
	margin: .7em 0;
}
.about details:first-of-type ul li {	
	list-style-type: "＊";
}
.about details:nth-of-type(2) ul li {
	list-style-type: "・";
}
.about details:last-of-type ul li {	
	list-style-type: decimal;
}
@media only screen and (max-width: 599px) { 
}
/****************************************
		Contact
*****************************************/
.contact {
	margin-bottom: 100px;
}
.contact .page-title {
	    margin-bottom: 2em;
}
table.contact-info {
	margin: 0 0 1em 0;
	background: none;
}
table.contact-info th {
	 padding: 0;
    width: 2.5em;
    border-bottom: none;
}
table.contact-info td {
	 padding: 0 0 1.5em 0;
    border-bottom: none;
}
 .contact-form, .contact-form td input, .contact-form textarea {
	width:100%; 
}
.contact-form {
	margin-top: 0;
}
 .contact-form td {
	border-bottom: 3px solid #E8DEE1;
}
 .contact-form td input { 
	height: 2em;
    border: none;
    background: none;
}
 .contact-form td textarea {   
    border: none;
    background: none;
	 form-sizing: content;
}
::placeholder {
	color: #959BA7;
	font-size: 75%;
}
:focus::placeholder {
	color: #F7F6F5;
}
.submit input {
	  border: none;
    background: none;
	font-family: 'Josefin Sans', sans-serif;
	color:#3F485A; 
	cursor: pointer;
}
.wpcf7-spinner {
	display: none!important;
}
.wpcf7-response-output {
	    font-size: 90%!important;
    border: none!important;
    padding: 20px!important;
    width: auto;
    margin: 2em 0 50px 0!important;
    text-align: left;
    background: #B0B6C3;
}
@media only screen and (max-width: 599px) {

}
/****************************************
		Category
*****************************************/
h1.page-title {
	    font-size: 160%;
    font-weight: 400;
	margin-bottom: .5em;
}
.pan {
	font-size: 80%;
	margin-bottom: 1em;
	    color: #959BA7;
}
.pan a {
	    color: #959BA7;
}
/* 子カテゴリーリスト */
.s_cate-list {
	font-size: 80%;	
}
.s_cate-list a {
	margin-right: 1em;
	line-height: 2.5em;
	display: inline-block;
}
.page .list {
	margin-top: 40px;
	margin-bottom: 50px;
}

/* お問い合わせはこちら */
.contact-button {
    text-align: right;
    margin-bottom: 2em;
}

/* 子カテゴリーリスト　フッター */
.s_cate-list-bottom {
	margin-bottom: 120px;
	padding-top: 2em;
	border-top: 1px solid #B0B6C3;
}
@media only screen and (max-width: 599px) { 

}

/****************************************
		記事
*****************************************/
h1.post-title {
	    font-size: 120%;
    font-weight: 700;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	margin-bottom: .5em;
}
.day {
	font-size: 80%;
}
/* 所属カテゴリーリスト */
.post .s_cate-list, .post .s_cate-list a {
	color: #959BA7;
	margin-right: 0;
}
.post .s_cate-list ul {
	display: flex;
}
.post .s_cate-list a {
	margin-right: .5em;
}
.post .s_cate-list a::after {
	content: " /";
}
.post .s_cate-list a:last-of-type::after {
	content: "";
}
/* 記事本文 */
.content {
	margin: 20px 0 100px 0;
    line-height: 2.1em;
	font-family: 'Zen Kaku Gothic New', sans-serif;
	text-align: justify;
}
.content img {
	margin: 2em 0 0 0;
	border: 1px solid #F7F6F5;
	width: calc(100%);
	max-width: calc(100%);
    /* margin: 1em 0 0 -30px;
     width: calc(100% + 30px);
    max-width: calc(100% + 30px); */
}
.content p {
    margin: 1em 0 0 0;
}
/* img直後に<br>テキストがある場合のマージン（ex:記事9495） */
.content p img:has(+ br) {
  margin-bottom: 1em;
}
.content h2 {
margin-top: 7em;
	margin-bottom: 2em;
    padding-top: 1em;
    border-top: 2px solid;
    font-size: 110%;
}
.content h2 img { /* for nintendo museum */
	display: inline;
    width: 3em;
    vertical-align: middle;
    border: none;
    margin: 0 1em 0 0;
}
.wp-element-caption {
	text-align: right;
    font-size: 70%;
	opacity: 0.7;
	padding-right: 3.5em;
	margin-bottom: 1em;
}
.wp-element-caption.x70 {
    background: url(https://yumiasakura.com/wp-content/uploads/X70-e1719557826474.png) center right no-repeat;
    background-size: auto 1.5em;
}
.wp-element-caption.xt50 {
    background: url(
https://yumiasakura.com/wp-content/uploads/xt50.png) center right no-repeat;
    background-size: auto 1.8em;
}
.wp-element-caption.gr {
    background: url(https://yumiasakura.com/wp-content/uploads/gr.png) center right no-repeat;
    background-size: auto 1.5em;
}
.content .wp-element-caption a {
	background: transparent;
	padding: 0;
}
.wp-block-image figcaption {
    margin-top: -1em!important;
}
.content .index {
	margin-top: 3em;
    padding: 2em;
    background: #F7F6F5;
	text-align: center;
	display: flex;
    flex-direction: column;
    align-items: center;
}
.content .index ul {
	text-align: left;
}
.content .index ul li {
	background: url(img/hana1.png) center left / .7em no-repeat;
	padding-left: 1.5em;
}
.content .index h2 {
	font-size: 90%;
	margin: 0 auto 1em auto;
	padding: 0;
	border: none;
}
.content a {
	background: #F7F6F5;
	padding: 0 .3em;
}
.content a:has(img) {
	background: transparent;
	padding: 0;
}
.content td {
    border-left: 1px dashed #E8DEE1;
}
ul.link {    
	width: 100%;
    background: #F7F6F5;
    padding: 2em;
    margin-top: 4em;
}
ul.link a {
	    padding-left: 1.2em;
    background: url(img/right.svg) left 0.45em no-repeat;
    background-size: 0.4em;
}
.tocontact {
	width: 100%;
    display: block;
    text-align: center;
    padding-bottom: 0.7em;
    border-bottom: 1px solid;
	margin-bottom: 5em;
}
.tocontact a {
    padding-left: 1.2em;
    background: url(img/right.svg) left 0 no-repeat;
    background-size: 0.4em;
}
/* 似ている記事 */
.similar {
}
.similar h3 {
	font-weight: 400;
	margin-bottom: 1em;
}
.similar ul {
	display: flex;
	 flex-wrap: wrap;
	    line-height: 0.7em;
}
.similar ul li {
	width: 49.6%;
	margin: 0 .2%;
}
.similar ul li p {
	font-size: 70%;
    padding: 1em 1em 1.5em 0;
    line-height: 1.6em;
}
/* 所属カテゴリーリスト フッター */
.post .s_cate-list-bottom {
	margin-top: 1em;
	margin-bottom: 80px;
	border-top: none;
	 padding-top: 1em;
}
.post .s_cate-list-bottom, .post .s_cate-list-bottom a {
	color: #959BA7;
	font-size: 80%;	
}
.post .s_cate-list-bottom a {
	display: inline-block;
	 margin-right: 0.8em;	   
    margin-bottom: 1em;
    padding: 0.7em 1.2em 0.3em 1.2em;
    border-radius: 2em;
    border: 1px solid #959BA7;
}
/* カメラ歴記事 */
.mycamera img {
	width: 100%;
}
/* 注意事項 */
.caution {
    padding: 2em;
    border: 2px solid;
    text-align: center;
    font-weight: bold;
	margin: 3em 0;
}
.caution h5 {
    font-size: 150%;
}
.caution p {
	margin-right: 0;
}
/* nintendo museum coin */
.content img.coin {
	height: 1em;
    width: auto;
    border: none;
    vertical-align: middle;
	margin: 0 .3em 0.3em 0;
}
@media only screen and (min-width: 600px) { 
	.content p {
		margin: 0 3em 1em 3em;
	}
	.content img {
	margin: 3em 0 0 -3em;
		width: calc(100% + 6em);
	max-width: calc(100% + 6em);
	}
	.content figure img {
		margin: 1em 0 0 0;
		width: calc(100%);
	}
	.post table {
		margin: 6em auto;
	} 
	.content ul {
	margin: 0 3em;
		width: calc(100% - 6em);
	}
	.similar ul li {
    width: 24.4%;
    margin: 0.2% 0.3%;
	}
	.mycamera img {
	width: 70%;
	}
}
/****************************************
		blog card
*****************************************/
.content .blogcard a:has(img) {
      display: grid;
    padding: 1em;
    background: #f4eff1;
    width: calc(100%);
    margin: 1em 0;
    line-height: 1.4em;
    font-size: 70%;
    grid-template-columns: repeat(1, 30%);
	align-items: center;
	border-radius: 5px;
}
.blogcard img {
	margin: 0;
    border: none;
    width: 100%;
    grid-column: 1;
    grid-row: 1;
}
.blogcard span {
    grid-column: 2;
    grid-row: 1;
    padding-left: 1em;
}
.blogcard b {
	margin-top: .5em;
	display: block;
	font-size: 110%;
}
.blogcard b::before {
    content: url(img/right.svg);
    margin-right: .5em;
}
@media only screen and (min-width: 600px) { 
	.content .blogcard a:has(img) {
    width: calc(100% - 6em);
    margin: 2em auto;
    font-size: 80%;
    grid-template-columns: repeat(1, 20%);
	}
	.blogcard span {
    padding-left: 2em;
	}
	.blogcard b {
    font-size: 120%;
	}
}
/****************************************
		Footer
*****************************************/
footer {
	 padding: 60px 60px 120px 50px;
    background: #F7F6F5;
	font-size: 90%;
	    box-sizing: border-box;
}
.footer-menu {
	display: flex;
}
.footer-menu ul:last-child {
	margin-left: 2em;
}
.footer-menu ul .cate_s {
	margin-left: .2em;
}
.search {
	border: none;
    border-bottom: 1px solid #3F485A;
    background: transparent;
	border-radius: 0;
    width: 50%;
}
.searchsubmit {
	border: none;
	text-indent: -9999px;
	background: url(img/search.png) center / .9em no-repeat transparent;
}
@media only screen and (min-width: 600px) { 
	footer {
    padding: 60px 20% 120px 20%;
    font-size: 80%;
	}
}
/****************************************
		404
*****************************************/
.notfound {
	height: 50vh;	
}
.notfound a::before {
    content: url(img/right.svg);
    margin-right: .5em;
}
.notfound form {
	width: 60%;
	margin-top: 2em;
}