
/*--------------------------------------------
/*		手帳特設
/*--------------------------------------------*/
.diary-talk {
	background-color: #F6F8E7;
	color: #2ADB53;
	padding: 4% 0;
	background-image: linear-gradient(#ECEFDB 1px, transparent 0), linear-gradient(90deg, #ECEFDB 1px, transparent 0);
    background-size: 18px 18px;
	font-family: "zen-kaku-gothic-new", sans-serif;
font-weight: 500;
font-style: normal;
}

.diary-talk .main {
	width: 640px;
	margin: 0 auto;
}
.diary-talk .main h2 {
	width: 77%;
    margin: 0 auto 6%;
}
.diary-talk .main p {
	width: 100%;
	margin: 0 auto 6%;
	font-size: 17px;
	line-height: 2.0;
	font-weight: 700;	
}
.diary-talk dl {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.diary-talk dt {
  width: 17%;
	background-color: #FDFFF0;
	color: #2ADB53;
	border-radius: 4px;
	margin-bottom: 12px;
	text-align: center;
	font-weight: bold;
	font-size: 12px;
    padding: 4px 0;
}

.diary-talk dd {
  width: 80%;
	margin-left: 3%;
	font-weight: bold;
}
.diary-talk a {
	color: #F6F8E7;
}
.diary-talk section {
	background-color: #49E266;
	color: #FDFFF0;
	width: 50%;
	margin: 0 auto;
	border-radius: 20px;
	padding: 3% 2%;
	position: relative;
}
.diary-talk .number {
	font-family: "futura-pt", sans-serif;
font-weight: 700;
font-style: normal;
	position: absolute;
    font-size:16px;
    letter-spacing: .08em;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #49E266;
	color: #F6F8E7;
    padding: 11px 25px 3px;
    right: 1px;
    top: 204px;
    -webkit-transform-origin: right center;
    -moz-transform-origin: right center;
    -o-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: rotate(90deg) translateY(-50%);
    -moz-transform: rotate(90deg) translateY(-50%);
    -o-transform: rotate(90deg) translateY(-50%);
    -ms-transform: rotate(90deg) translateY(-50%);
    transform: rotate(90deg) translateY(-50%);
}
.diary-talk .recommend-text span {
	border-bottom: 1px solid #F6F8E7;
	line-height: 2.0;
	padding-bottom: 6px;
}
.diary-talk section h2 {
	text-align: center;
	margin: 0 0 4%;
font-weight: 700;
font-style: normal;
}
.diary-talk .clip {
	width: 14%;
	position: absolute;
	    right: 3vw;
    top: -2vw;
	animation: katakata 1000ms 1500ms steps(1) infinite;
}
.diary-talk .clip img {
	transform: rotate(4deg)
}
@keyframes katakata {
  0%,100% {
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -o-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0)
    }

    50% {
        -webkit-transform: rotate(6deg);
        -moz-transform: rotate(6deg);
        -o-transform: rotate(6deg);
        -ms-transform: rotate(6deg);
        transform: rotate(6deg)
    }
}
.diary-talk .recommend-item ul {
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: nowrap;
        overflow-x: scroll;
        overflow-y: hidden;
        width: 100%;
	scrollbar-width: none;
}
.diary-talk .recommend-item ul li {
	flex-shrink: 0;
        width: 31%;
	margin: 2% 4.1% 0 0;
}
.diary-talk .recommend-item ul li h3 {
	font-size: 14px;
	line-height: 1.6;
	letter-spacing: 0.05em;
}
.diary-talk .recommend-item ul li .p-name {
	font-size: 14px;
	margin-bottom: 0;
}
.diary-talk .recommend-item ul li .price {
	font-size: 12px;
	margin-top: 2px;
}
.diary-talk .profile div {
	text-align: center;
}
.diary-talk .profile img {
	width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
}
.diary-talk .profile h3 {
	text-align: center;
}
.diary-talk .btn {
	text-align: center;
}
.diary-talk .btn a {
	background-color: #FDFFF0;
	color: #2ADB53;
	font-weight: bold;
	display: inline-block;
    padding: 0.8em 2em;
    border-radius: 100px;
	text-align: center;
	margin: 4% auto;
}
.diary-talk .imgArea span {
	bottom: -18px;
    position: absolute;
    right: 9px;
    font-size: 12px;
}
.diary-talk .moview_load {
	margin: 4% 0 2%;
}

.diary-talk .profile a {
	text-decoration: underline;
}
.diary-talk .section {
	margin-bottom: 10%;
}
.diary-talk .reccomend-diary dl dd a {
		 text-decoration: underline;
	}
@media screen and (min-width: 769px) {
br.sp {
	display: none;
}
}
@media screen and (max-width: 768px) {
	.diary-talk .main {
		width: 88%;
	}
	.diary-talk section {
		width: 94%;
        border-radius: 10px;
		padding: 4% 0;
}
	.diary-talk .reccomend-diary,.diary-talk .recommend-item,.diary-talk .profile {
		width: 90%;
    margin: 0 auto 10%;
	}
	
	.diary-talk section h2 {
		margin-bottom: 6%;
	}
	.diary-talk .main p {
		font-size: 14px;
		margin-bottom: 15%;
	}
	.diary-talk dt {
		font-size: 12px;
		width: 24%;
		margin-bottom: 0;
		height: 7vw;
	}
	.diary-talk dd {
		font-size: 14px;
		width: 57vw;
        margin: 0 0 4% 4%;
	}
	.diary-talk .imgArea span {
		    bottom: -32px;
    position: absolute;
    right: -8px;
    font-size: 10px;
	}
	.oneArea .onebox:nth-child(even) .imgArea span {
		    left: -10px;
	}
	.diary-talk .oneArea .imgArea img {
		width: 30px;
    height: 30px;
	}
	.diary-talk .oneArea .onebox .imgArea {
		width: 15%;
	}
	.diary-talk .oneArea .onebox:nth-child(odd) .imgArea img {
		right: 0;
	}
	.diary-talk .oneArea .onebox:nth-child(even) .imgArea img {
		left: 0;
	}
	.diary-talk section h2 {
		font-size: 18px;
	}
	.diary-talk .btn a {
		font-size: 12px;
	}
	.diary-talk .number {
		width: 30vw;
    font-size: 14px;
    padding: 2vw 4vw;
    top: -9vw;
		left: 6vw;
	transform:none;
}
	.diary-talk .oneArea .onebox .fukiArea {
		width: 68%;
	}
	.diary-talk .recommend-item ul li {
		width: 42%;
	}
	.diary-talk .oneArea .onebox .fukiArea {
		width: 74%;
	}
	.diary-talk .moview_load iframe {
		    width: 100%;
    height: 53vw;
	}
	.diary-talk .recommend-item ul li .p-name {
		font-size: 12px;
	}
	.RightToLeft {
  opacity: 0;
  transform: translateX(15px) !important;
  transition: .6s;
}
.LeftToRight {
  opacity: 0;
  transform: translateX(-15px) !important;
  transition: .6s;
}
	
}


/*--------------------------------------------
/*		トーク
/*--------------------------------------------*/
.oneArea {
  margin: 6% auto;
}
.oneArea .onebox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
	
}
.oneArea .onebox:nth-child(odd) {
  flex-direction: row-reverse;
}
.oneArea .onebox:nth-child(even) {
	margin-top: 20px;
}
.oneArea .onebox .imgArea {
  width: 14%;
height: 4.6vw;
  position: relative;
}
/*.oneArea .onebox:nth-child(even) .imgArea img {
  width: 100%;
  max-width: 130px;
  position: absolute;
  top: -20px;
  left: 0;
  padding-right: 30px;
}
.oneArea .onebox:nth-child(odd) .imgArea img {
  width: 100%;
  max-width: 130px;
  position: absolute;
  top: -20px;
  left: auto;
  right: 0;
  padding-left: 30px;
}*/
.oneArea .onebox .fukiArea {
  width: 63%;
}
.oneArea .onebox .fukidasi {
  width: 100%;
  position: relative;
  padding: 18px;
  background-color: #FDFFF0;
  font-size: 14px;
	letter-spacing: 0.04em;
	line-height: 1.8;
  color: #231815;
  border-radius: 12px;
  box-sizing: border-box;
}
.oneArea .onebox .fukidasi::before {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  top: 16px;
  border-right: 14px solid transparent;
  border-bottom: 14px solid transparent;
}
.oneArea .onebox .fukidasi::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  transform: rotate(45deg);
  top: 40px;
  border-right: 14px solid transparent;
  border-bottom: 14px solid transparent;
}
.oneArea .onebox:nth-child(even) .fukidasi::before {
  left: -10px;
  border-right: 14px solid #FDFFF0;
}

.oneArea .onebox:nth-child(odd) .fukidasi {
  background-color: #C1FFD2;
}
.oneArea .onebox:nth-child(odd) .fukidasi::before {
  left: auto;
  right: -10px;
  border-left: 14px solid transparent;
  border-top: 14px solid #C1FFD2;
}

.oneArea .onebox:nth-child(odd) .imgArea {
	text-align: right;
}
.fukidasi img {
	margin: 4% 0;
}
.oneArea .onebox:nth-child(odd) .imgArea img {
	right: 12px;
}
.oneArea .onebox:nth-child(even) .imgArea img {
	left: 12px;
}
.imgArea img {
	position: absolute;
	top: 4px;
	width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  object-position:54% 36%;
}

@media screen and (max-width: 1024px) {
  .oneArea .onebox:nth-child(odd) .imgArea img {
    max-width: 100%;
    top: 0;
  }
  .oneArea .onebox:nth-child(even) .imgArea img {
    max-width: 100%;
    top: 0;
  }
  .oneArea .onebox .fukidasi {
    padding: 15px;
    font-size: 14px;
  }
  .oneArea .onebox .fukidasi::before {
    top: 8px;
  }
  .oneArea .onebox .fukidasi::after {
    top: 20px;
  }
}
@media screen and (max-width: 420px) {
  .oneArea {
    margin: 30px auto;
  }
  .oneArea .onebox:nth-child(even) {
    margin-top: 15px;
  }
  .oneArea .onebox .imgArea {
    width: 20%;
  }
  .oneArea .onebox .fukidasi {
    padding: 10px 15px;
    font-size: 12px;
  }
}

/*------------------------------------------------------------
fadein
------------------------------------------------------------*/

.RightToLeft {
  opacity: 0;
  transform: translateX(50px);
  transition: .6s;
}
.RightToLeft.is-show {
  opacity: 1;
  transform: translateY(0);
}
.LeftToRight {
  opacity: 0;
  transform: translateX(-50px);
  transition: .6s;
}
.LeftToRight.is-show {
  opacity: 1;
  transform: translateY(0);
}
.fadein {
  opacity: 0;
  transform: translateY(100%);
  transition: .6s;
}
.fadein.is-show {
  opacity: 1;
  transform: translateY(0);
}
.delay_a {
  transition-delay: .2s;
}
.delay_b {
  transition-delay: .4s;
}
.delay_c {
  transition-delay: .6s;
}
.delay_d {
  transition-delay: .8s;
}
.delay_e {
  transition-delay: 1.0s;
}
