@charset "euc-jp";
/* CSS Document */

#FixRegi{display: none;}

mark {
    font-weight: bold;
    background: -webkit-linear-gradient(left, rgb(255 248 48 / 50%) 50%, transparent 50%);
    background: -moz-linear-gradient(left, rgb(255 248 48 / 50%) 50%, transparent 50%);
    background: linear-gradient(left, rgb(255 248 48 / 50%) 50%, transparent 50%);
    background-repeat: no-repeat;
    background-size: 200% .8em;
    background-position: 0% 9px;
}

#MainImgWrap{
    display: flex;
    justify-content: center;
    margin: 0 0 30px;
    overflow: hidden;
}

#MainImgWrap img{}

.frame{
    width: 992px;
	max-width: 95%;
    border: #c7edec 1px solid;
    border-radius: 4px;
    background-color: #fff;
    margin: 0 auto 30px;
    padding: 30px 0;
}

.frame p,.CaseStudy p,.Review p{
	width: 93%;
    font-size: 17px;
    line-height: 1.7;
	margin: 0 auto 20px;
}
.h2_type1{
    background: #28c6c0;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    margin: 0 0  30px;
    padding: 15px 0;
}
.h2_type2{
    width: 800px;
    font-size: 25px;
    color: #ffff;
    text-align: center;
    background-color: #f250a8;
    margin: auto;
    padding: 15px 0 10px;
    border-radius: 20px 20px 0 0;	
}
h2.preface{
    width: 95%;
    font-size: 23px;
    margin: 0 auto 20px;
    padding: 5px 0 5px 10px;
    border-left: 10px solid #28c6c0;
    border-bottom: 1px dotted #d9d9d9;	
}

.ProblemList{
    width: 800px;
    margin: auto;
    padding: 30px 0;
    background-color: #fffcf4;
    border-radius: 0 0 20px 20px;
    border: 2px solid #f250a8;
}
.ListWrap{
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;
}
.ListWrap img{margin-right: 30px;}
.ListWrap ul{
    max-width: calc(100% - 150px);
    padding: 0;
    margin: 0;
}
.ListWrap li{
    font-weight: bold;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.ListWrap li:nth-last-child(1){margin: 0;}
.ListWrap li:before{
    content: "";
    width: 31px;
    aspect-ratio: 31 / 31;
    background: url(https://kizuna3.com/img/Checkbox.png);
    background-repeat: no-repeat;
    display: block;
    margin-right: 15px;
}
.ListWrap li span{width: calc(100% - 46px);}
.ListWrap li b{color: #ff3984;}

.CaseStudy_wrap{margin-bottom: 30px;}
.CaseStudy{
    width: 650px;
    border: #c7edec 1px solid;
    background-color: #fff;
    border-radius: 4px;
    margin: 0 auto 20px;
}
.CaseStudy_ImgWrap{
    position: relative;
    margin: 0 0 20px;	
}
.CaseStudy_ImgWrap img{
    max-width: 100%;
    height: auto;	
}
.CaseStudy_ImgWrap span,.CaseStudy_ImgWrap h3{
    width: 100%;
    font-size: 21px;
    font-weight: bold;
    color: #fff;
    background: rgb(0 0 0 / 70%);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    position: absolute;
    bottom: 0;
    padding: 7px 10px 5px;	
}

.Review_wrap{margin-bottom: 30px;}
.Review{
    width: 650px;
    border: #c7edec 1px solid;
    background-color: #fff;
    border-radius: 10px;
    margin: 0 auto 20px;
}
.Review_ImgWrap{
    width: 85%;
    position: relative;
    margin: 30px auto 30px;
    display: flex;
    flex-wrap: wrap;	
}
.Review_ImgWrap img{
    width: 180px;
    height: auto;
    border-radius: 15px;
    margin-right: 30px;
}
.Review_ImgWrap a{text-decoration: none;color: #000;}
.Review_ImgWrap a:hover img{opacity: 0.7;transition: all 0.3s ease-in-out;}

.teller_title{
    display: block;
    font-size: 20px;
    margin: 20px 0 10px;
}
ruby{font-size: 30px;}
.sessei{
    display: block;
    margin-bottom: 10px;	
}
.Review_ImgWrap a:hover .sessei{color: #e6279c;transition: all 0.3s ease-in-out;}

.Star{
    font-size: 30px;
    color: #fdd034;
	margin-right: 5px;
}
.valuation{
    font-size: 28px;
    color: #757575;	
}
.Review_ImgWrap a:hover .valuation{color: #e6279c;transition: all 0.3s ease-in-out;}

.reviewer{
    width: 93%;
    color: #a4a3a3;
    font-size: 17px;
    display: block;
    margin: 0 auto 10px;	
}

.DivinationList{
    width: 992px;
	max-width: 95%;
    display: flex;
    flex-wrap: wrap;
    margin: 50px auto;
    justify-content: space-between;
    padding: 0;
}
.DivinationList li{
    width: 15%;
    list-style-type: none;
    margin: 0;	
}
.DivinationList img{
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 10px;	
}
.DivinationList span{
    font-size: 17px;
    display: block;
    text-align: center;	
}
.DivinationList a{text-decoration: none;color: #333;}
.DivinationList a:hover{color:#e6279c;transition: all 0.3s ease-in-out;}
.DivinationList a:hover img{opacity: 0.7;transition: all 0.3s ease-in-out;}

.faq{
    width: 992px;
	max-width: 95%;
    margin: 0 auto 30px;
	counter-reset: number 0;
}
.faq dt{
    background: #fff;
    border: 2px solid #f0f0f0;
    padding: 15px 10px;
    font-size: 18px;
    line-height: 1.7;
    margin-top: 15px;
    position: relative;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.faq dt:before{
    counter-increment: number 1;
    content: "Q" counter(number);
    font-size: 28px;
    font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
    font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
    color: #0da19b;
    margin-right: 10px;
    line-height: 0;
    position: relative;
    top: 3px;
}
.faq dt:after{
    content: "";
    width: 25px;
    aspect-ratio: 35 / 18;
    background: url(https://kizuna3.com/img/faq_arrow.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    display: block;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 20px;
	transform: rotate(0deg);transition: all 0.3s ease-in-out;
}
.faq dt.active:after{transform: rotate(180deg);transition: all 0.3s ease-in-out;}
.faq dt span{width: 90%;}
.faq dd{
	margin: 0;
	padding: 10px;
	background: #fff;
	border: 2px solid #f0f0f0;
	border-top: none;
	font-size: 17px;
	line-height: 1.7;
display: none;
}

.faq dd:before{content: "";}

.article_list{
    width: 992px;
	max-width: 95%;
    background: #fff;
    margin: 0 auto 30px;
    border: #c7edec 1px solid;
    padding: 0;
}
.article_list li{
    list-style-type: none;
    border-bottom: 1px dotted #c7edec;
}
.article_list li:nth-last-child(1){border: none;}
.article_list li img{
    width: 100px;
    height: auto;
}
.article_list a{
    text-decoration: none;
    width: 100%;
	padding: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;	
}
.article_list a:hover{
	opacity: 0.5;
	transition: all 0.3s ease-in-out;	
}
.article_meta{
    width: calc(100% - 120px);
    padding: 5px 0;	
}
.article_meta .love,.article_meta .category{
    font-size: 15px;
    color: #ed2496;
    border: 1px solid #ed2496;
    padding: 5px;	
}
.article_meta .site{
    font-size: 15px;
    color: #199ec7;
    border: 1px solid #199ec7;
    padding: 5px;
    margin-left: 10px;
}
.article_meta .date{
    color: #888;
    font-size: 15px;
    margin-left: 10px;	
}
.article_meta p{
    font-size: 18px;
    color: #333;	
}

.category_list{
    width: 992px;
	max-width: 95%;
    margin: 10px auto 20px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.category_list li{
    width: 24%;
    list-style-type: none;
    position: relative;
    aspect-ratio: 355 / 156;
    overflow: hidden;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 13px;
}
.category_list li:before{
    content: "";
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 40%);
    position: absolute;
    z-index: 1;
    pointer-events: none;
}
.category_list img{
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;	
}
.category_list p{
    font-size: 25px;
    line-height: 1.2;
    position: relative;
    z-index: 1;
    color: #fff;
    font-weight: bold;
    text-align: center;
    margin: 0;
}
.category_list p span{display: block;}

.category_list a{
    text-decoration: none;
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;	
}
.category_list a:hover img{transform:scale(1.2,1.2);transition:0.5s all;}

.Standard_btn{
    width: 650px;
    color: #fff;
    font-weight: bold;
    background: #ff517a;
    text-decoration: none;
    text-align: center;
    display: block;
    margin: 0 auto 30px;
    padding: 25px 0;
    border-radius: 8px;
    box-shadow: 0px 5px 0 #b34c65;
    position: relative;
    text-shadow: 0px 2px 0px #cc4162;
}
.Standard_btn:before{
    content: "";
    width: 30px;
    height: 30px;
    position: absolute;
    background: #fff;
    border-radius: 100px;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 25px;	
}
.Standard_btn:after{
    content: "";
    width: 14px;
    aspect-ratio: 18 / 27;
    background: url(https://kizuna3.com/img/arrow_btn.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 32px;
}
.Standard_btn:hover{
    box-shadow: none;
    background: #d12b52;
    transform: translateY(3px);
    transition: all 0.3s ease-in-out;	
}


.cont_title.keyword,.kw_wrap,.footer-wrap .cont_title{display: none;}

p.Annotation{
    width: 650px;
    background: #fff;
    margin: 0 auto 30px;
    padding: 15px;
    color: #e6279c;
    font-size: 16px;
    line-height: 1.5;
    font-weight: bold;
    border: 1px solid #fed6ec;
    border-radius: 4px;
}
p.Annotation a{color: #951664;}

/*テキスト折り畳み*/
.flexible_item {
    max-height: 13em;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
    position: relative;
    margin: 0 0 20px;
}
.flexible_item.collapsed::after {
    content: '';
    width: 100%;
    height: 70px;
    position: absolute;
    bottom: 0px;
    left: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgb(255 255 255) 50%);
}

.flexible_item.expanded {
	max-height: none; /* 全文表示 */
}


.collapsed {
}

.expanded {
  -webkit-line-clamp: none;
}

/*button*/
button {
  background: none; 
  color: inherit; 
  border: none; 
  padding: 0; 
  margin: 0; 
  font: inherit; 
  cursor: pointer;
  outline: inherit;
}

.toggleButton{
    font-size: 17px;
    color: #e6279c;
    border: 1px solid #e6279c;
    border-radius: 5px;
    margin: 0 auto 30px;
    padding: 10px;
    display: block;	
}


/* slick */
.slick-dotted.slick-slider{margin-bottom: 50px;}
.slick-initialized .slick-slide{display: flex;}
.slick-dots li button:before{font-size: 30px;width: 30px;height: 30px;}
.slick-dots li.slick-active button:before{color: #f250a8;}
.prev-arrow{
    width: 45px;
    height: 45px;
    color: #fff;
    position: absolute;
    top: 115px;
    left: calc(50% - 350px);
    z-index: 10;
    background-color: rgb(0 0 0 / 75%);
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;	
}
.prev-arrow:before{
	content:"";
	background: url(https://kizuna3.com/img/arrow_before.png);
	width: 18px;
	aspect-ratio: 18 / 27;
}
.next-arrow{
    width: 45px;
    height: 45px;
    color: #fff;
    position: absolute;
    top: 115px;
    left: calc(50% + 300px);
    z-index: 10;
    background-color: rgb(0 0 0 / 75%);
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;	
}
.next-arrow:before{
	content:"";
	background: url(https://kizuna3.com/img/arrow_next.png);
	width: 18px;
	aspect-ratio: 18 / 27;
}
.prev-arrow:hover,.next-arrow:hover{cursor:pointer}


.slick-slide{
    opacity: 0.8;
    transform: scale(0.9);
    -ms-filter: blur(3px);
    filter: blur(2px);
	transition: all 300ms ease;
}
.slick-center{
	opacity: 1;
	transform: scale(1);
    -ms-filter: blur(0px);
    filter: blur(0px);
	transition: all 300ms ease;
}

.slick-slide{
    height: auto!important;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
}

.slick-track {
  display: flex;
}
.slick-slide {
  height: auto !important;
}

@media (min-width: 768px) {

ul.teller-list,picture.campaign_banner{max-width: 95%;}
.top_campbtn{max-width: 95%; margin: auto;}
.top_campbtn img{ width: 100%; height: auto;}
.Gnavi_wrap .Gnavi_ul{
	overflow: hidden;
	max-width: 100%;	
}
	
}

@media (max-width: 767px) {
.h2_type1 {
    font-size: 4vw;
    margin: 0 0 5vw;
    padding: 2.5vw 0 2vw;
}
h2.preface {
    font-size: 4vw;
    margin: 0 auto 3vw;
    padding: 1vw 0 1vw 2vw;
    border-left: 2vw solid #28c6c0;
}
#MainImgWrap{margin: 0 0 5vw;}	
#MainImgWrap img {
    width: 100%;
    height: auto;
}	
.frame {
    width: 95%;
    margin: 0 auto 5vw;
    padding: 3vw 0;
}
.frame p, .CaseStudy p, .Review p {
    width: 95%;
    font-size: 3.7vw;
    line-height: 1.7;
    margin: 0 auto 3vw;
}
.h2_type2 {
    width: 95%;
    font-size: 4vw;
    padding: 2vw 0 1.5vw;
    border-radius: 3vw 3vw 0 0;
}
.ProblemList {
    width: 95%;
    padding: 3vw 0;
    border-radius: 0 0 3vw 3vw;
    border-top: none;
}
.ListWrap {
    width: 100%;
    align-items: center;
}
.ListWrap img {
    width: 24%;
    height: auto;
    margin-right: 2vw;
}
.ListWrap img[alt="思い悩む女性"]{
    width: 18%;
    height: auto;
    margin-right: 2vw;	
}
.ListWrap img[alt="スマホを見る女性"]{
	width: 20%;
	height: auto;
	margin-right: 2vw;
}
.ListWrap li:before {
    width: 4vw;
    background-size: 100%;
    margin-right: 2vw;
}	
.ListWrap ul {
    max-width: calc(100% - 20vw);
}
.ListWrap li{margin-bottom: 2vw;}
.ListWrap li:before {
    width: 3.5vw;
    margin-right: 1.5vw;
    transform: translateY(0.5vw);
}
.ListWrap li span {
    font-size: 3.7vw;
    width: calc(100% - 5vw);
}	
	
p.Annotation {
    width: 95%;
    margin: 0 auto 5vw;
    padding: 3vw;
    font-size: 3.7vw;
}
.Standard_btn {
    width: 95%;
    margin: 0 auto 5vw;
    padding: 3.5vw 0;
    font-size: 4vw;
}	
.DivinationList {
    width: 95%;
    margin: 5vw auto;
}	
.faq {
    width: 95%;
    margin: 0 auto 5vw;
}
.article_list {width: 95%;}	
.category_list {
    width: 95%;
    margin: 0 auto 5vw;
}	
.CaseStudy {
    width: 97%;
    border: #c7edec 1px solid;
    background-color: #fff;
    border-radius: 10px;
    margin: 0 auto 5vw;
    overflow: hidden;
}	
.CaseStudy_ImgWrap img {
    width: 100%;
    height: auto;
}
.prev-arrow {
    width: 8vw;
    height: 8vw;
    top: 10vw;
    left: 3vw;
}
.next-arrow {
    width: 8vw;
    height: 8vw;
    top: 10vw;
    right: 3vw;
    left: auto;
}
.prev-arrow:before{
	background-size: 100%;
	width: 3vw;	
}
.next-arrow:before{
	background-size: 100%;
	width: 3vw;	
}

.CaseStudy_ImgWrap {
    margin: 0 0 3vw;
}	
.CaseStudy_ImgWrap span,.CaseStudy_ImgWrap h3 {
    font-size: 3.7vw;
    padding: 1vw;
	line-height: 1.3;
}
.flexible_item {
    margin: 0 0 3vw;
	max-height: 13em;
}
.flexible_item.collapsed::after {
    height: 6vw;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgb(255 255 255) 90%);
}	
.toggleButton {
    font-size: 3.7vw;
    margin: 0 auto 7vw;
    padding: 3vw;
}

.slick-slide {
    opacity: 1;
    transform: scale(1);
    -ms-filter: blur(0px);
    filter: blur(0px);
}
.slick-center {
    opacity: 1;
    transform: scale(1);
    -ms-filter: blur(0px);
    filter: blur(0px);
}
.slick-dotted.slick-slider{margin-bottom: 10vw;}
.slick-dots {
    bottom: -8vw;
}
.slick-dots li {
    width: 8vw;
    height: 8vw;
    margin: 0 1vw;
}
.slick-dots li button:before {
    font-size: 8vw;
    width: 8vw;
    height: 8vw;
}
.slick-dots li button {
    width: 8vw;
    height: 8vw;
    padding: 0;
}
.Review_ImgWrap{justify-content: space-between;margin: 5vw auto 3vw;}
.Review_ImgWrap + a{}
.Review_ImgWrap > a{width: 35%;}
.Review_ImgWrap img {
    width: 100%;
    margin-right: 1vw;
}
.Review {
    width: 97%;
    margin: 0 auto 5vw;
}
.teller_meta{
    width: 60%;
    margin-top: 1vw;	
}
.teller_title {
    font-size: 4vw;
    margin: 0 0 2vw;
}
ruby{font-size: 6vw;}
.sessei {margin-bottom: 1vw;}
.sessei span{font-size: 4vw;}
.Star {
    font-size: 5.5vw;
    margin-right: 1vw;
}
.reviewer {
    width: 95%;
    font-size: 3.5vw;
    margin: 0 auto 3vw;
}
.valuation {
    font-size: 4vw;
}
.DivinationList li{
    width: 28%;
    margin: 0 0 3vw;
}	
.DivinationList span {font-size: 3.7vw;}	
.DivinationList img {margin: 0 auto 2vw;}	

.faq dt {
    padding: 3vw 2vw;
    font-size: 3.7vw;
    margin-top: 2vw;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.faq dt:before {
    font-size: 5.5vw;
    margin-right: 2vw;
    top: 0vw;
}
.faq dt span{width: 80%;}	
.faq dt:after {
    width: 4vw;
    right: 4vw;
}
.faq dd {
    padding: 3vw;
    font-size: 3.7vw;
    line-height: 1.5;
}
	
	
.article_list a {
    padding: 3vw;
    align-items: flex-start;
}	
.article_meta p {
    font-size: 3.8vw;
    line-height: 1.5;
    margin: 0;
    /*height: 17vw;*/
    display: flex;
    align-items: center;
}
.article_list li img {
    width: 30%;
    height: auto;
}
.article_meta {
    width: calc(100% - 33%);
    padding: 1vw 0;
}
.article_meta .love, .article_meta .category {
    font-size: 3.5vw;
    padding: 1vw;
}
.article_meta .site {
    font-size: 3.5vw;
    padding: 1vw;
    margin-left: 1vw;
}
.article_meta .date {
    width: 100%;
    font-size: 3.5vw;
    margin: 3vw 0 1vw;
    display: block;
}

.category_list{margin: 0 auto 0;}
.category_list li {
    width: 49%;
    margin: 0 0 3vw;
}	
.category_list p {
    font-size: 4.5vw;
    line-height: 1.5;
}

.Standard_btn:before {
    width: 6vw;
    height: 6vw;
    right: 3vw;
}	
.Standard_btn:after {
    width: 2.5vw;
    right: 4.5vw;
}

.tab-wrap input:checked+label {
	text-shadow: none;
	background: #fff;
	box-shadow: none;
	color: #ed4ab3;
	border: 2px solid #ed4ab3;
}
.tab-wrap label:nth-of-type(2) {
	text-shadow: none;
	background: #fff;
	box-shadow: none;
	color: #636c8d;
	border: 2px solid #636c8d;
}
.tab-wrap input:checked+label:before {
	content: "";
	background: url(https://kizuna3.com/img/Checkbox2.png);
	background-size: 100%;
	background-repeat: no-repeat;
	width: 12%;
	height: 0;
	padding-bottom: calc(12%* 50 / 50);
	display: block;
	margin-right: 2.5vw;
	transform: translateY(0vw);
}
.tab-wrap label:before {
    content: "";
    background: url(https://kizuna3.com/img/Checkbox2b.png);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 12%;
    height: 0;
    padding-bottom: calc(12%*50/50);
    display: block;
    margin-right: 2.5vw;
    transform: translateY(0vw);
}
.tab-wrap label:nth-of-type(1){
    text-shadow: none;
    background: #fff;
    box-shadow: none;
    color: #636c8d;
    border: 2px solid #636c8d;	
}	
	
	
	
}