@charset "utf-8";

/* ================ ALL ================ */
@media screen and (max-width:959px) {
	.pc-only{ display: none; }
}
@media screen and (min-width:960px) {
	.sp-only{ display: none; }
}
body {
	animation: fadeIn .5s ease 0s 1 normal;
	-webkit-animation: fadeIn .5s ease 0s 1 normal;
}
@keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}




/* ～479px：SP縦
---------------------------------------- */







/* ======================================
 mainvis-top
======================================== */
.mainvis-top{
	overflow: hidden;
	position: relative;
	height: calc(100vh - 50vw);
}
/*.mainvis-top::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.15);
	z-index: 1;
}*/

.mainvis-txt{
	position: absolute;
	left: 3%;
	bottom: 10%;
	padding: 20px;
	
	letter-spacing: 0.1em;
	line-height: 1.4;
	font-weight: normal;
	color: #fff;
	border-radius: 20px;
	background-color: rgba(0,0,0,0.5);
}

/* ムービー */
.mainvis-top video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}



/* スライド */
.mv-slider.slick-slider{
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
	width: 100%;
	height: calc(100vh - 8.33333vw);
}
.mv-slider__bg{
	width: 100%;
	height: 100%;
}	
.mv-slider01 .mv-slider__bg{ background: url("/images/mv01_sp.jpg") no-repeat center; background-size: cover; }
.mv-slider02 .mv-slider__bg{ background: url("/images/mv02_sp.jpg") no-repeat center; background-size: cover; }
.mv-slider03 .mv-slider__bg{ background: url("/images/mv03_sp.jpg") no-repeat center; background-size: cover; }
.mv-slider04 .mv-slider__bg{ background: url("/images/mv04_sp.jpg") no-repeat center; background-size: cover; }
.mv-slider05 .mv-slider__bg{ background: url("/images/mv05_sp.jpg") no-repeat center; background-size: cover; }
.mv-slider06 .mv-slider__bg{ background: url("/images/mv06_sp.jpg") no-repeat center; background-size: cover; }
.mv-slider07 .mv-slider__bg{ background: url("/images/mv07_sp.jpg") no-repeat center; background-size: cover; }
.mv-slider08 .mv-slider__bg{ background: url("/images/mv08_sp.jpg") no-repeat center; background-size: cover; }



/* 生後 */
.afterbirth{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;

	position: absolute;
	right: 3%;
	bottom: 0;
	z-index: 2;
	width: 80px;
	height: 80px;
	text-align:center;
	border-radius: 50%;
	background: url(/images/mainvis_day_bg.gif) repeat;
}
.afterbirth p{
	color: #3d2502;
	font-size: 1.0rem;
	font-weight: bold;
	line-height: 1.0;
}
.afterbirthi p span{
	font-size: 2.2rem;
}
.afterbirth p em{
	font-size: 1.8rem;
}
.afterbirth p strong{
	font-size: 3.0rem;
	font-weight: bold;
	font-family: "Arial";
	letter-spacing: 0;
}

/* wave */
.wave {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 2000px;
	height: 15px;
	z-index: 1;
	-webkit-animation: wave-s 20s linear infinite;
	animation: wave-s 20s linear infinite;
	background-image: url("/images/wave.svg");
	background-repeat: repeat-x;
	background-position: top left;
	padding-bottom: 2px;
}

.wave::before {
	content: '';
	position: absolute;
	bottom: -2px;
	height: 3px;
	left: 0;
	width: 100%;
	background: #f5f5f5;
}

@media screen and (min-width: 600px) {
  .wave {
    width: 4000px;
    height: 30px;
    -webkit-animation: wave-m 25s linear infinite;
            animation: wave-m 25s linear infinite;
    background-image: url("/images/wave.svg");
  }
}

@media screen and (min-width: 1200px) {
  .wave {
    height: 55px;
    width: 8000px;
    -webkit-animation: wave-l 30s linear infinite;
            animation: wave-l 30s linear infinite;
    background-image: url("/images/wave.svg");
  }
}

@-webkit-keyframes wave-s {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-1000px);
            transform: translateX(-1000px);
  }
}

@keyframes wave-s {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-1000px);
            transform: translateX(-1000px);
  }
}

@-webkit-keyframes wave-m {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-2000px);
            transform: translateX(-2000px);
  }
}

@keyframes wave-m {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-2000px);
            transform: translateX(-2000px);
  }
}

@-webkit-keyframes wave-l {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-4000px);
            transform: translateX(-4000px);
  }
}

@keyframes wave-l {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-4000px);
            transform: translateX(-4000px);
  }
}

/* スクロール */
.header-scroll {
  position: absolute;
  bottom: 15px;
  left: 50%;
	z-index: 2;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  text-align: center;
}

@media screen and (min-width: 600px) {
  .header-scroll {
    bottom: 30px;
  }
}

@media screen and (min-width: 1200px) {
  .header-scroll {
    bottom: 80px;
  }
}

.header-scroll_text {
  display: block;
  letter-spacing: 0.12rem;
  font-weight: bold;
  color: #fff;
  margin-bottom: 2.66667vw;
}

@media screen and (min-width: 600px) {
  .header-scroll_text {
    margin-bottom: 10px;
  }
}

.header-scroll_icon {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 60px;
  overflow: hidden;
  position: relative;
}

.header-scroll_icon .line {
  position: absolute;
  top: -60px;
  display: block;
  width: 1.5px;
  height: 60px;
  border-radius: 5px;
  background: #fff;
  -webkit-animation: scrollLine 2s infinite;
          animation: scrollLine 2s infinite;
}

.header-scroll_icon .icon {
  position: absolute;
  bottom: 0px;
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
}

@-webkit-keyframes scrollLine {
  0% {
    top: -60px;
  }
  30% {
    top: 0;
  }
  70% {
    top: 0;
  }
  100% {
    top: 60px;
  }
}

@keyframes scrollLine {
  0% {
    top: -60px;
  }
  30% {
    top: 0;
  }
  70% {
    top: 0;
  }
  100% {
    top: 60px;
  }
}







/* ======================================
 トップページコンテンツ
======================================== */
.top-sect .inner{
	padding: 30px 5px;
  position: relative;
  display: flex;
}
.sect-ttl{
  padding-top: 4vh;
  position: sticky;
  top: 0;
  -ms-flex-item-align: baseline;
  align-self: baseline;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  margin-top: -4vh;
}

.sect-ttl span {
    display: block;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    -webkit-font-feature-settings: "pkna";
    font-feature-settings: "pkna";
}
.sect-ttl .en{
	font-size: 1.0rem;
	line-height: 1.44;
	margin-left: 7px;
	color: #b59500;
}
.sect-ttl .ja{
  line-height: 1;
	font-size: 2.5rem;
	font-weight: 600;
	letter-spacing: .1em;
}
.sect-body{
	margin-left: 2%;
}


/* 琥大朗さんぽ */
.dogwalking{
	background: #f5f5f5;
}
.dogwalking-cassette{
  display: flex;
	flex-wrap: wrap;
  margin-left: -2%;
}
.dogwalking-item{
	position: relative;
  margin-left: 2%;
  width: calc(100% / 2 - 2%);
}

.dogwalking-item .dogwalking-item_img{
  position: relative;
}
.dogwalking-item .dogwalking-item_img figure{
  overflow: hidden;
}
.dogwalking-item .dogwalking-item_img figure img{
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
.dogwalking-item .dogwalking-item_img:before{
  position: absolute;
  left: 2px;
  top: 2px;
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  border: solid 1px #b59500;
}
.dogwalking-item:nth-child(2n){
	margin-top: 30px;
}
.dogwalking-item:nth-child(4n + 1) .dogwalking-item_img figure,
.dogwalking-item:nth-child(4n + 1) .dogwalking-item_img:before{
  border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;
}
.dogwalking-item:nth-child(4n + 2) .dogwalking-item_img figure,
.dogwalking-item:nth-child(4n + 2) .dogwalking-item_img:before{
  border-radius: 80% 30% 50% 50%/50%;
}
.dogwalking-item:nth-child(4n + 3) .dogwalking-item_img figure,
.dogwalking-item:nth-child(4n + 3) .dogwalking-item_img:before{
  border-radius: 40% 40% 50% 40%/30% 50% 50% 50%;
}
.dogwalking-item:nth-child(4n + 4) .dogwalking-item_img figure,
.dogwalking-item:nth-child(4n + 4) .dogwalking-item_img:before{
  border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;
}

.dogwalking-item_date{
	position: absolute;
	left: 0;
	top: -10px;
	line-height: 1.2;
	color: #00aabb;
	font-size: 1.8rem;
	text-shadow: 0px 0px 6px rgba(255,255,255,0.5);
	transform:rotate(-10deg);
	font-weight: bold;
}
.dogwalking-item:nth-child(2) .dogwalking-item_date{
	top: 0;
}
.dogwalking-item:nth-child(3) .dogwalking-item_date{
	top: -10px;
}
.dogwalking-item_date .marker{
	padding: 0 5px;
	background: linear-gradient(transparent 70%,rgba(247, 198, 104, 0.2) 70%,rgb(247, 198, 104) 85%,rgba(247, 198, 104, 0.2));
}
.dogwalking-item_date .day{
	font-size: 1.1rem;
}
.dogwalking-item_txt{
	position: relative;
	z-index: 1;
	margin: -20px 0 0 0;
	padding: 10px;
  font-size: 1.1rem;
	line-height: 1.3;
	border-radius: 20px;
	background-color: rgba(255, 255, 255, 0.8);
	
}
.dogwalking-bt{
	display: flex;
	flex-direction: column;
	margin-top: 20px;
}
.dogwalking-txt{
	font-size: 1.6rem;
	color: #00aabb;
	font-weight: bold;
	text-align: center;
}
.dogwalking-txt span{
	padding: 0 10px;
	background: linear-gradient(transparent 70%,rgba(247, 198, 104, 0.2) 70%,rgb(247, 198, 104) 85%,rgba(247, 198, 104, 0.2));
}
.dogwalking .sect-more{
	margin-top: 20px;
}
.sect-more a{
	display: block;
	position: relative;
	padding: 10px 40px;
	text-align: center;
	text-decoration: none;
	color: #fff;
	border-radius: 50vw;
	background: #00aabb;
}



/*  シェアボタン
-----------------------------------------------------------*/
.share-buttons{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin-top: 50px;
}
.share-buttons li{
	padding: 0 10px;
}

.share-buttons li a{
	position: relative;
	display: block;
	padding: 10px 20px;
	width: 45px;
	height: 45px;
	border-radius: 50%;
	transition: all 0.4s ease;
}
.share-buttons li a:hover{
	opacity: .6;
}

.share-buttons li.facebook a{ background: #3b5998; border-bottom: solid 3px #2c4373; }
.share-buttons li.twitter a{ background: #00acee; border-bottom: solid 3px #0092ca;; }
.share-buttons li.line a{ background: #25af00; border-bottom: solid 3px #219900; }

.share-buttons li a:before{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
}

.share-buttons li.facebook a:before{ background: url("/images/sns/facebook_w.svg") center /100% auto no-repeat; }
.share-buttons li.twitter a:before{ background: url("/images/sns/twiiter_w.svg") center /100% auto no-repeat; }
.share-buttons li.line a:before{ background: url("/images/sns/line_w.svg") center /100% auto no-repeat; }

@media screen and (max-width: 959px){
	.share-buttons{
		margin-top: 20px;
	}
	.share-buttons li{
		padding: 0 5px;
	}
	
	.share-buttons li a{
		width: 50px;
		height: 50px;
	}
	.share-buttons li a:before{
		font-size: 2.5rem;
	}
}

.share-buttons li span{
	display: none;
}


/* ======================================
 下層ページ共通
======================================== */
.page-contents{
	margin: 0 10px;
}








/* ======================================
 アーカイブページ
======================================== */
/* 琥大朗さんぽ */
.dog-walking .entry-cassette{
  display: flex;
	flex-wrap: wrap;
	margin-top: 50px;
  margin-left: -2%;
}
.dog-walking .dogwalking-item{
  margin-bottom: 0;
}

.dogwalking-archive{
	margin-top: 20px;
}
.dogwalking-archive_dt{
	text-align: center;
	font-weight: bold;
}
.dogwalking-archive_list{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-left: -5px;
}
.dogwalking-archive_list li{
	margin: 5px 0 0 5px;
}
.dogwalking-archive_list li a{
	display: block;
	padding: 5px;
	border: solid 1px #ccc;
}






    
/* ～959px：タブレット
------------------------------ */
@media screen and (min-width: 480px) and (max-width: 959px) {

	/* ======================================
	 mainvis-top
	======================================== */
	.mainvis-top,
	.mv-slider.slick-slider{
		height: calc(100vh - 16vw);
	}
}
  
 
/* 960px～：PC
------------------------------ */
@media screen and (min-width: 960px) {

	
	
	/* ======================================
	 mainvis-top
	======================================== */
	.mainvis-top,
	.mv-slider.slick-slider{
		height: calc(100vh - 100px);
	}
	.mv-slider01 .mv-slider__bg{ background: url("/images/mv01.jpg") no-repeat center; background-size: cover; }
	.mv-slider02 .mv-slider__bg{ background: url("/images/mv02.jpg") no-repeat center; background-size: cover; }
	.mv-slider03 .mv-slider__bg{ background: url("/images/mv03.jpg") no-repeat center; background-size: cover; }
	.mv-slider04 .mv-slider__bg{ background: url("/images/mv04.jpg") no-repeat center; background-size: cover; }
	.mv-slider05 .mv-slider__bg{ background: url("/images/mv05.jpg") no-repeat center; background-size: cover; }
	.mv-slider06 .mv-slider__bg{ background: url("/images/mv06.jpg") no-repeat center; background-size: cover; }
	.mv-slider07 .mv-slider__bg{ background: url("/images/mv07.jpg") no-repeat center; background-size: cover; }
	.mv-slider08 .mv-slider__bg{ background: url("/images/mv08.jpg") no-repeat center; background-size: cover; }

	.afterbirth{
		width: 165px;
		height: 165px;
	}
	.afterbirth p{
		font-size: 1.5rem;
	}
	.afterbirthi p span{
		font-size: 2.2rem;
	}
	.afterbirth p em{
		font-size: 3.8rem;
	}
	.afterbirth p strong{
		font-size: 5rem;
	}
	
	/* ======================================
	 SNS follow me!
	======================================== */


	
	
	
	/* ======================================
	 トップページコンテンツ
	======================================== */
	.top-sect .inner{
		padding: 100px 0;
	}
	.sect-ttl{
		padding-top: 80px;
		margin-top: -80px;
	}
	.sect-ttl .en{
		font-size: 1.3rem;
	}
	.sect-ttl .ja{
	  font-size: 3.5rem;
	}
	.sect-body{
		margin-left: 5%;
	}

	/* 琥大朗さんぽ */
	.dogwalking-item{
		width: calc(100% / 4 - 2%);
	}
	.dogwalking-item .dogwalking-item_img:before{
		left: 3px;
		top: 3px;
	}
	.dogwalking-item:nth-child(2n){
		margin-top: 30px;
	}
	.dogwalking-item:nth-child(2) .dogwalking-item_date{
		top: 10px;
	}
	.dogwalking-item:nth-child(3) .dogwalking-item_date{
		top: -10px;
	}
	.dogwalking-item_date .marker{
		padding: 0 5px;
		background: linear-gradient(transparent 70%,rgba(247, 198, 104, 0.2) 70%,rgb(247, 198, 104) 85%,rgba(247, 198, 104, 0.2));
	}
	.dogwalking-item_date .day{
		font-size: 1.1rem;
	}
	.dogwalking-item_txt{
		margin: -20px 0 0 50px;
		font-size: 1.3rem;

	}

	.dogwalking-bt{
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 40px;
	}
	.dogwalking-txt{
		font-size: 2.5rem;
		text-align: left;
	}
	.dogwalking .sect-more{
		margin-top: 0;
	}
	

	
	
		
}






.header-title p{
	margin: 0 20px 0;
	padding: 10px 0;
	color: #3d2502;
	font-size: 1.5rem;
	font-weight: bold;
	text-align: center;
	line-height:1.4;
	border-top: dotted 2px #3d2502;
}
.header-fukidashi{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;

	position: absolute;
	right: 3%;
	bottom: 30px;
	width: 165px;
	height: 165px;
	text-align:center;
	border-radius: 50%;
	background: url(/images/mainvis_day_bg.gif) repeat;
}
.header-fukidashi p{
	color: #3d2502;
	font-size: 1.5rem;
	font-weight: bold;
	line-height: 1.0;
}
.header-fukidashi p span{
	font-size: 2.2rem;
}
.header-fukidashi p em{
	font-size: 3.8rem;
}
.header-fukidashi p strong{
	font-size: 6.2rem;
	font-weight: bold;
}
.discription{
	position: absolute;
	left: 5px;
	top: 520px;
	color: #3d2502;
	font-size: 1.6rem;
	font-weight: bold;
	text-shadow: 0px 0px 8px #fff;
}

























.widget-content form{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}
#search{
	padding: 10px;
	width: calc(100% - 62px);
	font-size: 1.6rem;
	border: solid 1px #ccc;
	outline: none;
}
.search input:nth-child(2){
	padding: 10px 15px;
	color: #fff;
	font-weight: bold;
	font-size: 1.6rem;
	border: none;
	background: #3d2502;
	transition: all 0.4s ease;
}
.search input:nth-child(2):hover{
	opacity: .6;
}
.header-inner .sp{
	display: none;
}











/* ===================================================================================================
   見出し
 =================================================================================================== */
.page-title:before{
	content: "Kotaro BLOG";
}


/* ===================================================================================================

   詳細ページ
 =================================================================================================== */
.page-entrytitle{
	font-size: 2.2rem;
	line-height: 1.3;
}
@media screen and (min-width: 960px) {
	.page-entrytitle{
		font-size: 3.0rem;
	}
}
.page-date{
	margin-top: 15px;
	font-size: 1.4rem;
	font-weight: bold;
	color: #666;
}
.page-category{
	margin-top: 10px;
}
.page-category span{
	display: inline-block;
	padding: 3px 10px;
	color: #666;
	font-size: 1.0rem;
	border-radius: 5px;
	border: solid 1px #666;
}

/* キービジュアル
-----------------------------------------------------------*/
.pagevis{
	position: relative;
	display: block;
	margin-top: 20px;
	color: #333;
	text-decoration: none;
}
.pagevis figure{
	position: relative;
	overflow: hidden;
	padding-top: calc(220 / 325 * 100%);
}
.pagevis figure img{
	width: 100%;
	height: auto;
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
.pagevis img{
	width: 100%;
	height: auto;
}
.page-description{
	padding: 10px 20px;
	color: #fff;
	line-height: 1.3;
	background: #3d2502;
}
.page-index{
	margin: 30px auto 0;
	width: 100%;
	max-width: 800px;
}
.mokuji{
	padding: 20px;
	border: solid 1px #ccc;
	background: #f5f5f5;
}
.mokuji li{
	position: relative;
	padding-left: 30px;
}
.mokuji li:not(:first-child){
	margin-top: 10px;
}
.mokuji li:before{
	position: absolute;
	left: 0;
	top: 0;
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background: url(/images/ico_doc.png) no-repeat 0 0;
	background-size: 100% auto;
}
.mokuji li a{
	font-weight: bold;
}

.moviewrap{
	position:relative;
	width: 100%;
	max-width: 700px;
	padding-top:56.25%;
	margin: 25px auto 0;
}
.moviewrap iframe{
	position:absolute;
	top:0;
	right:0;
	width:100%;
	height:100%;
}
.twitter-tweet{
	margin: 25px auto 0!important;
}
.instagram-media{
	margin: 25px auto 0!important;
}
.photo, .photo02{
	text-align: center;
}
.photo img{
	overflow: hidden;
	width: 550px;
	height: auto;
	border-radius: 20px;
}
.photo02 img{
	/*max-width: 400px;*/
}


.page-subcontents{
	margin-top: 50px;
}
.page-subcontents h3{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	
	padding: 5px 15px;
	min-height: 60px;
	font-size: 2.0rem;
	font-weight: bold;
	line-height: 1.3;
	color: #fff;
	background: #3d2502;
}
.asset-body{
	margin: 0 auto;
	width: 100%;
	max-width: 800px;
}
.asset-body p,
.asset-body ul,
.asset-body figure{
	margin-top: 30px;
	line-height: 2.0;
}
.page-subcontents dl{
	margin-top: 25px;
}
.page-subcontents dt{
	line-height: 2.0;
	font-weight: bold;
}
.page-subcontents dt:not(:first-of-type){
	margin-top: 20px;
}


.page-subcontents dd{
	line-height: 2.0;
}
.page-subcontents dd + dd{
	margin-top: 25px;
}
.page-subcontents dd p:first-child{
	margin-top: 0;
}

.asset-body li{
	position: relative;
	padding-left: 1em;
}
.asset-body li:before{
	position: absolute;
	left: 0;
	top: 0;
	content: "・";
}
.list-dog{
  margin: 0 20px;
}
.list-dog li{
  padding-left: 30px;
}
.list-dog li:before{
	position: absolute;
	left: 0;
	top: 5px;
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background: url(/images/ico_doc.png) no-repeat 0 0;
	background-size: 100% auto;
}
.list-dog li a{
	font-weight: bold;
}

.asset-body strong{
	font-weight: bold;
}
.waku{
	margin-top: 20px;
	padding: 20px;
	border: solid 10px #f5f5f5;
}
.product{
	overflow: hidden;
	width: 100%;
	max-width: 550px;
	margin: 20px auto 0;
	padding: 0 20px;
	text-align: center;
	border-radius: 20px;
	border: solid 1px #ccc;
}
.product img{
	width: 100%;
	height: auto;
	border: none;
}
.product table{
	width: 100%;
}
.product td > div{
	width: 100% !important;
}
.fukidashi{
	position: relative;
	width: 100%;
	margin: 40px auto 20px!important;
	padding: 10px;
	text-align: center;
	font-weight: bold;
	line-height: 1.5;
	border-radius: 50vw;
	background: #f5f5f5;
}
.fukidashi:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -16px;
  border: 13px solid transparent;
  border-top: 13px solid #f5f5f5;
  z-index: 2;
}

.spotinc-wrap{
	margin-top: 30px;
}
.spotinc-wrap a{
	position: relative;
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: center;
	padding: 2px 30px 2px 2px;
	color: #333;
	text-decoration: none;
	border: solid 1px #ccc;
	background: #f5f5f5;
	transition: all 0.4s ease;
}
.spotinc-wrap a:after{
	position: absolute;
    right: 5px;
    top: 50%;
    transform: translate(0,-50%);
    font-family: 'Material Icons Round';
    font-size: 2.5rem;
    content: "\e5cc";
}
.spotinc-wrap_body{
	width: 70%;
	padding: 10px;
}
.spotinc-wrap_name{
	margin-top: 0!important;
	font-weight: bold;
	font-size: 1.8rem;
	line-height: 1.3;
}
.spotinc-wrap_txt{
	margin-top: 10px!important;
}
.spotinc-wrap_photo{
	width: 30%;
}
.spotinc-wrap_photo figure{
	position: relative;
	overflow: hidden;
	margin: 0;
	padding-top: 100%;
	height: 100%;
}
.spotinc-wrap_photo img{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%!important;
	height: 100%!important;
	object-fit: cover;
	object-position: 50% 50%;
	vertical-align: bottom;
}
@media screen and (min-width: 960px) {
	.spotinc-wrap{
		margin-top: 50px;
	}
	.spotinc-wrap a:hover{
		opacity: .6;
	}
	.spotinc-wrap_body{
		padding: 20px;
	}
	.spotinc-wrap_name{
		font-size: 2.5rem;
	}
	.spotinc-wrap_photo{
	}
	.spotinc-wrap_photo figure{
		padding-top: 70%;
	}
}

.drivespotbt{
	margin: 50px auto 0!important;
	max-width: 500px;
}
.drivespotbt a{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 50px;
	margin: 0 10px;
	color: #fff;
	text-decoration: none;
	line-height: 1.3;
	text-align: center;
	border-radius: 50vw;
	background: #3d2502;
	transition: all 0.4s ease;
}
.drivespotbt a:after{
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 2.5rem;
	font-family: 'Material Icons Round';
	content: "\e5cc";
}

@media screen and (min-width: 960px) {
	.drivespotbt a:hover{
		opacity: .6;
	}
}

@media screen and (max-width: 750px){
	.asset-body p, .asset-body ul{
		margin-top: 20px;
		line-height: 2.0;
	}
	.page-subcontents dt{
		margin-top: 20px;
		line-height: 1.5;
		font-weight: bold;
	}
	.page-subcontents dd{
		line-height: 1.5;
	}
	.page-subcontents dd + dd{
		margin-top: 20px;
	}
	.page-subcontents{
		margin-top: 20px;
	}
}


.gmap {
	margin-top: 20px;
	height: 0;
	overflow: hidden;
	padding-bottom: 80%;
	position: relative;
}
.gmap iframe {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
}
.sub-contents__kome{
	margin-top: 10px!important;
	text-align: right;
	font-size: 1.3rem;
}


/* ===================================================================================================
   cassette
 =================================================================================================== */
.entry-cassette{
	display: flex;
	flex-wrap: wrap;
	margin: 15px 0 0 -5px;
}
.entry-item{
	margin: 5px 0 0 5px;
	width: calc(100% / 2 - 5px);
}



.entry-item a{
	display: flex;
	flex-direction: column;
	padding-bottom: 5px;
	height: 100%;
	color: #333;
	text-decoration: none;
	box-shadow: 1px 1px 3px rgb(0 0 0 / 20%);
	background: #fff;
	transition: all 0.4s ease;
}
.entry-item__img img{
	width: 100%;
	height: auto;
	vertical-align: bottom;
	transition: .5s ease;
}

.entry-item__detail{
	flex: 1 auto;
	margin: 5px 5px 0;
}
.entry-item__category span{
	display: inline-block;
	padding: 5px;
	font-size: 1.0rem;
	color: #fff;
	line-height: 1.0;
	background: #3d2502;
}
.entry-item__title{
	margin-top: 5px;
	line-height: 1.3;
	font-weight: bold;
}
.entry-item__txt{
	display: none;
	margin-top: 15px;
	font-size: 1.3rem;
}
.entry-cassette .entry-item__txt{
	font-size: 1.6rem;
}
.entry-item__date{
	margin: 5px 10px 0;
	text-align: right;
}
@media screen and (min-width: 960px){
	.entry-cassette{
		display: flex;
		flex-wrap: wrap;
		margin: 10px 0 0 -10px;
	}
	.entry-item{
		margin: 10px 0 0 10px;
		width: calc(100% / 3 - 10px);
	}
	.entry-item:nth-child(4){
		display: none;
	}
	
	.entry-item a:hover{
		opacity: .6;
	}
	.entry-item a:hover img{
		width: 110%;
	}	
	.entry-cassette .entry-item__meta{
		display: flex;
		align-items: center;
		margin: 10px 0 0;
	}
	.entry-cassette .entry-item__meta .entry-item__date{
		margin: 0 0 0 15px;
	}
}



/* ===================================================================================================
   トップ　SNS枠
 =================================================================================================== */
.sns-wrapper{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 50px;
}
.sns-wrapper-box{
    overflow: hidden;
    border-radius: 5px;
    background: #fff;
}
.sns-wrapper-box:first-child{
    width: 35%;
}
.sns-wrapper-box:nth-child(2){
    position: relative;
    width: calc(65% - 20px);
}
.sns-wrapper-box h2{
    position: relative;
    padding: 10px 15px;
    color: #fff;
    font-size: 2.5rem;
    font-weight: bold;
    text-align: center;
    background: #3d2502;
}
.cassette-youtube{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 5px 20px 0 5px;
}
.cassette-youtube li{
    margin: 15px 0 0 15px;
    width: calc(100% / 2 - 15px);
}
.cassette-youtube li img{
    width: 100%;
    height: auto;
    vertical-align: bottom;
}
.youtubelink{
	position: absolute;
	right: 10px;
	bottom: 15px;
	min-width: 220px;
	text-align: center;
	font-weight: bold;
	background: url(/images/bg_more.png) no-repeat right bottom;
}
.youtubelink a{
	color: #3d2502;
}

@media screen and (max-width: 750px){
    .sns-wrapper{
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin: 50px 10px 0;
    }
    .sns-wrapper-box:first-child{
        width: 100%;
    }
    .sns-wrapper-box:nth-child(2){
        position: relative;
        margin-top: 20px;
        padding-bottom: 55px;
        width: 100%;
    }
    .sns-wrapper-box h2{
        padding: 5px 15px;
        font-size: 1.8rem;
    }

    .cassette-youtube{
        margin: 5px 15px 0 5px;
    }
    .cassette-youtube li{
        margin: 10px 0 0 10px;
        width: calc(100% / 2 - 10px);
    }
    .cassette-youtube li img{
        width: 100%;
        height: auto;
        vertical-align: bottom;
    }
    .youtubelink{
        position: absolute;
        right: 10px;
        bottom: 15px;
        min-width: 220px;
        text-align: center;
        font-weight: bold;
        background: url(/images/bg_more.png) no-repeat right bottom;
    }
    .youtubelink a{
        color: #3d2502;
    }
}




/*  detail
-----------------------------------------------------------*/
.asset-body{
	margin-top: 20px;
}

/* 記事内フォト一覧
-----------------------------------------------------------*/
.photo-cassette{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin: 50px 0 0 -25px;
}
.photo-cassette li{
	margin: 25px 0 0 25px;
	width: calc(100% / 3 - 25px);
}
.photo-cassette li img{
	width: 100%;
	height: auto;
	vertical-align: bottom;
}
@media screen and (max-width: 750px){
	.photo-cassette{
		margin: 0 0 0 -10px;
	}
	.photo-cassette li{
		margin: 20px 0 0 10px;
		width: calc(100% / 2 - 10px);
	}
}



/* 記事内
-----------------------------------------------------------*/
.entry-categories{
	display: flex;
	margin-top: 40px;
	padding-top: 20px;
	border-top: dotted 1px #ccc;
}
.entry-categories h4{
	width: 100px;
}
.entry-categories ul{
	width: calc(100% - 110px);
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.entry-categories ul li a{
	display: inline-block;
}
#trackbacks{
	display: flex;
	margin-top: 40px;
}
.trackbacks-info{
	margin-left:15px;
}
.entry-tags{
	display: flex;
	margin-top: 10px;
}
.entry-tags h4{
	width: 100px;
}
.entry-tags ul{
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	width: calc(100% - 110px);
}
.entry-tags ul li a{
	display: inline-block;
}


/*  アドセンス
-----------------------------------------------------------*/
.adcense{
	margin-top: 20px;
	text-align: center;
}





/*  コメント
-----------------------------------------------------------*/
.comments{
	margin-top:50px;
	padding-top:20px;
	border-top: dotted 1px #ccc;
}
.comments-header{
	text-align: center;
	font-size: 2.5rem;
	line-height: 1.2;
	color: #3d2502;
	font-weight: bold;
}
.comments-open{
	margin-top:50px;
}
.comments-open-header{
	text-align: center;
	font-size: 2.5rem;
	line-height: 1.2;
	color: #3d2502;
	font-weight: bold;
}
#comments-open-data{
	margin: 20px auto 0;
	max-width: 700px;
}
.comment-input{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	justify-content: space-between;
}
.comment-input:not(:first-of-type){
	margin-top: 20px;
}
.comment-input label{
	display: inline-block;
	width: 150px;
	font-size: 1.6rem;
}
.comment-input input{
	width: calc(100% - 150px);
	height: 30px;
	padding: 0 10px;
	font-size: 1.6rem;
	border-radius: 0;
	box-shadow: none;
	-webkit-appearance: none;
	-moz-appearance: textfield;
	border: solid 1px #C0C5CB;
}
#comment-form-remember-me,{
	margin-top: 20px;
	text-align: right;
}
#comment-form-reply{
	margin: 20px auto 0;
	max-width: 700px;
	text-align: right;
}

#comments-open-text{
	margin: 20px auto 0;
	max-width: 700px;
}
#comments-open-text label{
	font-size: 1.6rem;
}
#comments-open-text textarea{
	padding: 5px 10px;
	width: 100%;
	font-size: 1.6rem;
	font-family: Helvetica, Arial, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", sans-serif;
	line-height: 1.7;
	border: solid 1px #C0C5CB;
	
}
#comments-open-footer{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin-top:50px;
}
#comments-open-footer input{
	padding: 10px 20px;
	width: 150px;
	font-size: 1.6rem;
	background: #eee;
}
.comment-comp h1{
	text-align:center;
}
.comment-comp p{
	margin-top: 20px;
	text-align: center;
	font-size: 1.6rem;
}
.comment-comp a{
	display: inline-block;
	padding: 10px 20px;
	background: #fff;
}

#comments-content .inner{
	margin-top: 20px;
	padding: 20px;
	box-shadow: 0px 2px 6px 0px rgba(119, 113, 99, 0.3);
	background-color: rgba(255, 255, 255, 0.5);
}
.comment-header{
	text-align: right;
}










/* pagetopボタン */
.page-top {
	bottom: 20px;
	right: 20px;
	position: fixed;
	z-index: 1000;
	cursor: pointer;
}
.page-top a:after {
}

.banner-bot{
	margin-top:40px;
	text-align:center;
}




@media screen and (max-width: 959px) {
	.header .banner{
		margin: 20px auto 0;
		padding: 20px 5px;
	}
}



@media screen and (max-width: 959px){

	
	.discription{
		position: absolute;
		left: 5px;
		top: 220px;
		color: #3d2502;
		font-size: 1.0rem;
		font-weight: bold;
		text-shadow: 0px 0px 8px #fff;
	}
	.toppage .navigation{
		margin-top: 0;
	}
	
	.pagevis{
		margin-top: 20px;
	}

	
	

	#contents{
		z-index: inherit;
	}
	#contents.top{
		margin-top: 10px;
	}
	#page-title{
		font-size: 2.0rem;
	}
	.pagevis figure{
		padding-top: calc(200 / 325 * 100%);
	}
	.cassette{
		margin-left: 0;
	}
	.cassette li{
		margin: 10px auto 0;
		width: calc(100% - 20px);
	}
	.cassette li a{
		padding: 10px;
		z-index: inherit;
	}
	.cassette li h2{
		margin: 10px 0 0;
	}
	.cassette li a .cassette-txt{
		margin: 10px 0 0;
	}
	.cassette li a .cassette-date{
		margin: 10px 0 0;
	}
	.cassette li a .cassette-date em{
		font-size: 1.0rem;
	}
	.cassette li.cat_photo a:before{
		top: -5px;
		width: 30px;
		height:30px;
		line-height: 30px;
		font-size: 2.0rem;
	}
	
	.cassette li p.cassette-more{
		display: none;
	}
	.asset-body{
	}
	.asset-body img{
		width: 100%;
		height: auto;
	}
	.asset-body .product > img{
		height:0;
		padding:0;
		border:none;
	}		
	.entry-categories{
		margin-top: 20px;
	}
	#trackbacks{
		margin-top:20px;
		display: block;
	}
	.trackbacks-info{
		margin-left:0;
	}	


	
	/*  コメント
	-----------------------------------------------------------*/
	.comments{
		margin-top:20px;
	}
	.comments-header{
		font-size: 2.0rem;
	}
	.comments-open{
		margin-top:20px;
	}
	.comments-open-header{
		text-align: center;
		font-size: 2.0rem;
		line-height: 1.2;
		color: #3d2502;
		font-weight: bold;
	}
	#comments-open-data{
		margin-top: 5px;
	}
	.comment-input{
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
	}
	.comment-input:not(:first-of-type){
		margin-top: 5px;
	}
	.comment-input label{
		width: 100%;
	}
	.comment-input input{
		width: 100%;
	}
	#comment-form-remember-me{
		margin-top: 10px;
		text-align: right;
	}
	#comment-form-reply{
		margin: 10px auto 0;
	}
	
	#comments-open-text{
		margin-top: 10px;
	}
	#comments-open-text label{
		font-size: 1.6rem;
	}
	#comments-open-footer{
		margin-top:20px;
	}
	.comment-comp p{
		text-align: left;
	}
	#comments-content .inner{
		margin-top: 10px;
		padding: 10px;
		box-shadow: 0px 2px 6px 0px rgba(119, 113, 99, 0.3);
		background-color: rgba(255, 255, 255, 0.5);
	}
    
    
	
	.page-description{
		padding: 10px;
	}
	.page-subcontents h3{
		padding: 10px;
		font-size: 1.8rem;
	}

	.page-side-contents{
		margin-top: 20px;
	}
}





/* ===================================================================================================
   googleads
 =================================================================================================== */
.googleads, .googleads-top{
	margin-top: 50px;
}
.googleads-entry{
	margin-top: 30px;
}
@media screen and (max-width: 750px){
	.googleads, .googleads-top{
		margin-top: 25px;
	}
}


/* ===================================================================================================
   header
 =================================================================================================== */
.mainvis img, .pageheader img{
	vertical-align: bottom;
}
.mainvis-title{
	position: absolute;
	left: 10%;
	bottom: 10%;
	z-index: 1;
	padding-top: 250px;
	width: 100%;
	max-width: 500px;
	background-color: rgba(255, 255, 255, 0.5);
}
.pageheader-title{
	width: 300px;
}
.header-title img,
.pageheader-title img{
	max-width: 100%;
	vertical-align: bottom;
}
	
.header-title h1{
	position: absolute;
	left: -14px;
	top: -30px;
}
.header-title p{
	margin: 0 20px 0;
	padding: 10px 0;
	color: #3d2502;
	font-size: 1.5rem;
	font-weight: bold;
	text-align: center;
	line-height:1.4;
	border-top: dotted 2px #3d2502;
}

.discription{
	position: absolute;
	left: 5px;
	top: 520px;
	color: #3d2502;
	font-size: 1.6rem;
	font-weight: bold;
	text-shadow: 0px 0px 8px #fff;
}


	.pageheader{
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		width: 100%;
		background-color: rgba(255, 255, 255, 0.9);
	}





















.widget-content form{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}
#search{
	padding: 10px;
	width: calc(100% - 62px);
	font-size: 1.6rem;
	border: solid 1px #ccc;
	outline: none;
}
.search input:nth-child(2){
	padding: 10px 15px;
	color: #fff;
	font-weight: bold;
	font-size: 1.6rem;
	border: none;
	background: #3d2502;
	transition: all 0.4s ease;
}
.search input:nth-child(2):hover{
	opacity: .6;
}


@media screen and (max-width: 640px) {

	.pageheader{
		position: fixed;
		right: 0;
		top: 0;
		width: 100%;
		z-index: 11;
	}
	.pageheader-nav{
		display: block;
		cursor: pointer;
	}
	.header .pageheader-nav{
		position: fixed;
		right: 0;
		top: 0;
		z-index: 11;
	}
	.pageheader-nav .active{
		position: fixed;
		right: 0;
		top: 0;
		z-index: 1000;
	}

	

}