@charset "UTF-8";

/********************************************
共通
*********************************************/
.posi {
    position: absolute;
    z-index: 10;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease;
}

/********************************************
intro
*********************************************/
.intro {
    margin-top: 120px;
    position: relative;
}
.intro .slider_01 {
    background-image: url(/src/img/top/main_bg.jpg);
}

.intro .slider li {
    position: relative;
    height: 560px;
}

.intro .slider li span {
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    z-index: 1;
}

.intro .slider li .photo01 {
    width: 540px;
    height: 540px;
    background-image: url(/src/img/top/main_img01.jpg);
    left: -8%;
    top: -20%;
}

.intro .titArea {
	text-align: center;
	position: relative;
	padding: 7rem 0;
	z-index: 1;
}

.intro .slider li .photo02 {
    width: 230px;
    height: 230px;
    background-image: url(/src/img/top/main_img03.jpg);
    right: 0;
    top: 2%;
}
.intro .slider li .photo03 {
    width: 360px;
    height: 360px;
    background-image: url(/src/img/top/main_img02.jpg);
    right: 5%;
    top: 30%;
}

.titArea .sub {
    font-size: 1.8rem;
    color: #575453;
    text-shadow: 0 0 20px rgb(255 255 255 / 80%), -1px -1px 10px rgb(255 255 255), 1px 1px 20px rgb(255 255 255);
    position: relative;
    z-index: 10;
}
.titArea .sub br { display: none;}
.titArea .main_logo {
    width: 80%;
    margin: 2rem auto;
}

.intro .slider li .illust01 {
    top: 60%;
    left: 25%;
    width: 4%;
}

.intro .slider li .illust02 {
    top: 50%;
    right: 2%;
}
.intro .slider li .illust03 {
    top: 70%;
    right: 0;
    width: 5%;
}

.intro .slider li .ico_free {
    right: -5%;
    top: 10%;
    width: 20%;
}

.intro .slider li .illust {
    right: -4%;
    top: 10%;
    width: 4%;
    transform: rotate(300deg);
}

/*
.intro:after {
	content: '';
	position: absolute;
	background-image: url(/src/img/top/cloud.png);
	background-position: bottom center;
	padding-bottom: 11.52073732%;
	background-repeat: repeat-x;
	bottom: 0;
	width: 100%;
	background-size: 110%;
}
*/

/********************************************
intro_text
*********************************************/
.intro_text {
    position: relative;
    text-align: center;
		padding-top:14rem;
		border-bottom:4px solid #fcd7dc;
}

.intro .textArea {
    margin-top: -5rem;
}

.intro_text .textArea {
    margin-top: -1rem;
    padding-bottom: 7rem;
    max-width: 1024px;
    position: relative;
}

.intro_text .intro_illust01 {
    left: -20%;
    top: 20%;
    /* -webkit-animation-name: fuwafuwa02; */
}

.intro_text .intro_illust02 {
    left: -20%;
    top: -50%;
    -webkit-animation-name: fuwafuwa01;
}

.intro_text .intro_illust03 {
    left: 17%;
    top: -30%;
    -webkit-animation-name: fuwafuwa02;
}
.intro_text .intro_illust04 {
    top: -30%;
    left: 35%;
    width: 4%;
    transform: rotate(-90deg);
}

.intro_text .intro_illust05 {
    left: 38%;
    top: -20%;
    /* -webkit-animation-name: fuwafuwa01; */
}

.intro_text .intro_illust06 {
    right: 30%;
    top: -25%;
    /* -webkit-animation-name: fuwafuwa03; */
}

.intro_text .intro_illust07 {
    right: 10%;
    top: -40%;
    -webkit-animation-name: fuwafuwa02;
}
.intro_text .intro_illust08 {
    right: -25%;
    top: -30%;
    -webkit-animation-name: fuwafuwa03;
}

.intro_text .intro_illust09 {
    right: -30%;
    top: 20%;
}

.intro_text .textArea h2 .intro_maintit_block {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 1.5em;
}

.intro_text .textArea .text {
    font-size: 1.1rem;
    line-height: 2.2;
    margin-top: 2rem;
}

.intro_text .intro_illust10 {
    left: 0;
    bottom: 0;
}

.intro_text .intro_illust11 {
    left: 2%;
    bottom: 24%;
}

.intro_text .intro_illust12 {
    left: 15%;
    bottom: 12%;
}

.intro_text .intro_illust13 {
    left: 25%;
    bottom: -5%;
}

.intro_text .intro_illust14 {
    right: 20%;
    bottom: 0;
}

.intro_text .intro_illust15 {
    right: 15%;
    bottom: 30%;
}

.intro_text .intro_illust16 {
    right: 3%;
    bottom: -10%;
    animation: yurayura 2s linear infinite;
}

.intro_text .intro_illust17 {
    right: 1%;
    bottom: -8%;
}

/********************************************
topicArea
*********************************************/
.topicArea {
    background-image: url(/src/img/top/bg_topics.jpg);
    padding: 3rem 0 6rem 0;
    border-top: #fcd7dc 5px solid;
    position: relative;
}
.topicArea:after {
	content: '';
	background-image: url(/src/img/common/wave-white.svg);
	position: absolute;
	z-index: 5;
	background-position: 0 0;
	background-repeat: repeat-x;
	bottom: -1px;
	left: 0;
	right: 0;
	animation: 20s linear infinite wave-intro;
	height: 68px;
}
.topicArea > h2 {
    text-align: center;
    width: 190px;
    height: auto;
    margin: 2rem auto;
    position: relative;
}

.topicArea h2 .topic_tit {
    display: inline-block;
    width: 190px;
}
.topicArea > h2:before,
.topicArea h2 .topic_tit:before, 
.topicArea h2 .topic_tit:after {
	content: '';
	background-repeat: no-repeat;
	background-size: 100%;
	position: absolute;
}

.topicArea > h2:before {
	width: 290px;
	height: 150px;
	background-position: center top;
	background-image: url(/src/img/top/fukidashi.png);
	top: -160px;
	left: -50%;
	animation: poyopoyo 2s ease-out infinite;
}

.topicArea h2 .topic_tit:before {
    background-image: url(/src/img/top/title_left.png);
    width: 110px;
    height: 60px;
    left: -140px;
    top: -40px;
}

.topicArea h2 .topic_tit:after {
    background-image: url(/src/img/top/title_right.png);
    width: 90px;
    height: 80px;
    right: -110px;
    top: -50px;
}


.topicArea > h2 small {
    display: block;
    margin-top: 1rem;
}
.topic_illust01 {
    left: 2%;
    top: 50%;
    -webkit-animation-name: fuwafuwa01;
}

.topic_illust02 {
    left: 15%;
    top:-5%;
    animation: poyoyon 1.5s ease-in-out infinite forwards;
}

.topic_illust03 {
    left: 10%;
    bottom: 20%;
    -webkit-animation-name: fuwafuwa02;
    width: 3%;
}

.topic_illust04 {
    right: 12%;
    top: 2%;
    -webkit-animation-name: fuwafuwa03;
}

.topic_illust05 {
    right: 0;
    bottom: 25%;
    -webkit-animation-name: fuwafuwa01;
}

/********************************************
bnrArea
*********************************************/
.bnrArea {
    padding: 4rem 0 7rem 0;
}
.bnrArea ul {
    display: flex;
    justify-content: space-between;
}

.bnrArea ul .copy {
    position: absolute;
    top: -120px;
    z-index: 10;
}

.bnrArea ul li {
    position: relative;
    width: 48%;
}

.bnrArea ul li .img {
    overflow: hidden;
    border-radius: 10px;
    position: relative;
    z-index: 20;
    display: inline-block;
}

.bnrArea ul li .img img {
	-webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

.bnrArea ul li .cap {
    font-size: 1rem;
    line-height: 1.6;
    margin-top: 0.5rem;
    display: block;
}

/********************************************
ytArea
*********************************************/

.waveArea {
    position: relative;
}

.waveArea:before {
	content: '';
	width: 100%;
	height: 105%;
	background-image: url(/src/img/top/main_bg.jpg);
	position: absolute;
	top: 20%;
	z-index: 0;
}

.waveArea:after {
    content: '';
    background-image: url(/src/img/common/wave-white.svg);
    position: absolute;
    z-index: 0;
    background-position: 0 0;
    background-repeat: repeat-x;
    top: 20%;
    left: 0;
    right: 0;
    animation: 20s linear infinite wave-intro;
    height: 68px;
    transform: rotate(180deg);
}
.ytArea {
    position: relative;
    z-index: 10;
    text-align: center;
}

.ytArea h2 {
    display: flex;
    align-items: end;
    justify-content: center;
}

.ytArea h2 .ico_yt {
    width: 10%;
    margin-right: 1rem;
}

.ytArea h2 .logo_yt {
    width: 20%;
    margin-right: 1rem;
}

.text_yt {
    font-size: 2rem;
    line-height: 1.5;
    color: #70423a;
}

.ytArea .playArea {
    width: 560px;
    height: 315px;
    margin: 2rem auto;
}

.ytArea .playArea.playArea iframe {
    width: 100%;
    height: 100%;
}

.more {
    font-weight: 600;
    font-size: 1.1rem;
    display: inline-block;
    padding: 1.3rem 7rem;
    border-radius: 100px;
    position: relative;
}

.more:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -6px;
    width: 10px;
    height: 10px;
    border-top: 3px solid #fa6391;
    border-right: 3px solid #fa6391;
    transition: all 0.3s;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.ytArea .more {
    background-color: #fff;
	box-shadow: 3px 3px 0 0 #fa6391;
	border: #fa6391 2px solid;
	color: #fa6391;
}
.yt_illust01 {
    width: 8%;
    left: 0;
    top: 70%;
}
.yt_illust02 {
    width: 8%;
    left: -2%;
    top: 60%;
}
.yt_illust01,
.yt_illust03 {
	animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.5s;
    animation-name: anim_h;
}
.yt_illust03 {
    width: 8%;
    right: -0;
    top: 70%;

}
.yt_illust04 {
    width: 10%;
    right: -2%;
    top: 60%;
}

.ad {
    position: relative;
    background-color: #fff;
    border-radius: 20px;
    border: #a5e1eb 5px solid;
    padding: 0 2rem 2rem;
    margin-top: 3rem;
    text-align: center;
}
.ad dl {
    display: flex;
    align-items: center;
}

.ad dt {
    width: 35%;
    padding: 2rem 1rem 0;
}

.ad dd {
    width: 65%;
    padding-left: 3%;
    text-align: left;
}

.ad h3 {
    font-size: 1.3rem;
    line-height: 2;
}

.ad h3 i {
    display: inline-block;
    width: 25%;
}

.ad dd .text {
    font-size: 1.1rem;
    margin-top: 0.5rem;
    line-height: 1.8;
}

.ad .more {
    color: #fff;
    background-color: #60bff4;
    border: #4bafe7 2px solid;
    box-shadow: 3px 3px 0 0 #4bafe7;
}
.ad .more:after {
   border-color: #fff; 
}

/********************************************
keyframes
*********************************************/
@keyframes anim_h {
  0% {
    transform: translate(0px, 0);
  }
  100% {
    transform: translate(7px, 0);
  }
}
@keyframes poyoyon {
  0%  {
    transform: translate(0, 0);
  }
  15% {
    transform: translate(0, 3px);
  }
  30% {
    transform: translate(0, 6px);
  }
  50% {transform: translate(0, -5px);
  }
  70% {
    transform: translate(0, 3px);
  }
  100% {
    transform: translate(0, 0);
  }
  0%, 100% {
    opacity: 1;
  }
}
@keyframes yurayura {
  0%,100% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(2deg);
  }
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.97);
  }
}

@media screen and (min-width: 1800px) {
	.intro .slider li .photo01 {
			width: 600px;
			height: 600px;
			left: -5%;
	}
	.intro .slider li {
			height: 750px;
	}
	
	.intro .titArea {
			padding: 10rem 0 0;
	}
	
	.intro .slider li .photo03 {
			right: 10%;
			width: 400px;
			height: 400px;
	}
	
	.intro .slider li .photo02 {
			right: 5%;
			width: 280px;
			height: 280px;
			top: 0;
	}
	
	.topic_illust04 {
			right: 2%;
	}
}

@media screen and (min-width: 1025px) {
	.more:hover {
			box-shadow: inherit;
			-webkit-transform: translateY(1px);
			-ms-transform: translateY(1px);
			transform: translateY(1px);
	}
	.bnrArea ul li .img:hover img {    
			-webkit-transform: scale(1.05);
			-ms-transform: scale(1.05);
			transform: scale(1.05);
			opacity: 1.0;
	}
}

@media screen and (max-width: 1400px) {
	.intro .slider li .photo02 {
			display: none;
	}
	.intro .slider li .photo01 {
			width: 40vw;
			height: 40vw;
	}
	
	.intro .slider li .photo03 {
			right: 0;
			width: 320px;
			height: 320px;
	}
	.titArea .sub {
			font-size: 1.6rem;
			line-height: 1.5;
	}
	.intro .slider li .illust02 {
			display: none;
	}
	
	.intro_text .intro_illust02 {
			width: 30%;
			left: -10%;
	}
	
	.intro_text .intro_illust03 {
			width: 15%;
			left: 20%;
	}
	
	.intro_text .intro_illust07 {
			width: 14%;
			right: 17%;
	}
	
	.intro_text .intro_illust05 {
			width: 7%;
	}
	
	.intro_text .intro_illust06 {
			width: 7%;
			right: 35%;
	}
	
	.intro_text .intro_illust08 {
			width: 25%;
			right: -10%;
			top: -45%;
	}
	
	.intro .slider li .illust03 {
			top: 20%;
			right: 2%;
			width: 6%;
	}
	.intro_text .textArea h2 .intro_maintit_block {
			width: 80%;
			margin-left: 12%;
	}
	.topic_illust02 {
			width: 12%;
	}
	
	.topic_illust03 {
			left: 5%;
			bottom: 16%;
	}
	
	.topic_illust04 {
			width: 9%;
	}
}

@media screen and (max-width: 1200px) {
	.intro_text .intro_illust02 {
			width: 25%;
			left: -5%;
	}
	
	.intro_text .intro_illust03 {
			width: 12%;
			top: -25%;
	}
	
	.intro_text .intro_illust07 {
			width: 12%;
			right: 20%;
	}
	
	.intro_text .intro_illust08 {
			width: 22%;
			right: -5%;
	}
	
	.topic_illust04 {
			top: 6%;
	}
	.intro_text .intro_illust01{ display: none;}
	
	.intro_text .intro_illust12, 
	.intro_text .intro_illust15 {
			display: none;
	}
	
	.topic_illust02 {
			top:-3%;
			left:10%;
	}
	
	.topic_illust03 {
			bottom: 7%;
	}
	.bnrArea ul .copy {
			top: -100px;
	}
}
@media screen and (max-width: 1024px) {
	.intro {
			margin-top: 80px;
	}
	
	.titArea .sub br {
			display: block;
	}
	
	.intro .slider li .ico_free {
			right: 15%;
			top: 5%;
			width: 15%;
	}
	
	.intro .slider li .illust {
			right: 10%;
			top: 5%;
	}
	
	.intro .titArea {
			padding: 5rem 0;
	}
	
	.titArea .main_logo {
			width: 45%;
			margin: 1rem auto;
			position: relative;
			z-index: 1;
	}
	
	.titArea .sub {
			font-size: 1.5rem;
	}
	
	.intro .slider li .photo03 {
			width: 30vw;
			height: 30vw;
			top: 10vw;
			right: -3%;
	}
	
	.intro .slider li {
			height: 440px;
	}
	
	.intro_text .intro_illust02 {
			width: 20%;
			left: 0;
			top: -30%;
	}
	
	.intro_text .intro_illust08 {
			width: 20%;
			right: 0;
	}
	
	.intro_text .intro_illust07 {
			top: -30%;
	}
	
	.intro_text .intro_illust05 {
			width: 5%;
	}
	
	.intro_text .intro_illust06 {
			width: 5%;
	}
	
	.intro_text .intro_illust04 {
			width: 3.5%;
	}
	
	.intro_main_tit01 {
			width: 35%;
			display: block;
			margin: 0 auto;
	}
	
	.intro .slider li .photo01 {
			left: -8vw;
			top:-6vw;
			width:40vw;
			height:40vw;
			background-size:contain;
			background-position: left top;
	}
	
	.intro_text .textArea h2 .intro_maintit_block {
			width: 70%;
			margin: 0 auto;
	}
	
	.intro_text .intro_illust16 {
			display: none;
	}
	
	.intro_text .intro_illust10 {
			width: 17%;
	}
	
	.intro_text .intro_illust11 {
			bottom: 16%;
	}
	
	.intro_text .intro_illust13 {
			width: 7%;
	}
	
	.intro_text .intro_illust14 {
			width: 12%;
	}
	.topicArea > h2:before {
			width: 260px;
			height: 140px;
			top: -140px;
	}
	.topic_illust05, .intro_text .intro_illust17 { display: none;}
	.yt_illust01 {
			left: 5%;
	}
	
	.yt_illust02 {
			left: 3%;
	}
	
	.yt_illust03 {
			right: 5%;
	}
	
	.yt_illust04 {
			right: 3%;
	}
}
@media screen and (max-width: 750px) {
	.intro {
			margin-top: 70px;
	}
	
	.intro .slider li .photo01 {
			width: 300px;
			height: 300px;
			left: -20%;
			background-position: center left 25px;
			top: -15%;
	}
	
	.intro .slider li .ico_free {
			width: 20%;
			right: 5%;
	}
	
	.titArea .sub {
			font-size: 1.25rem;
	}
	
	.intro .slider li .photo03 {
			width: 170px;
			height: 170px;
	}
	
	.intro .slider li .illust {
			right: 20%;
			width: 6%;
	}
	
	.intro .slider li {
			height: 375px;
	}
	
	.intro_text .intro_illust03 {
			top: -15%;
	}
	
	.intro_text .intro_illust04 {
			top: -25%;
	}
	
	.intro_text .intro_illust05 {
			top: -15%;
			width: 6%;
	}
	
	.intro_text .intro_illust06 {
			top: -15%;
			width: 6%;
	}
	
	.intro_text .intro_illust07 {
			top: -20%;
	}
	
	.intro_text .intro_illust08 {
			top: -30%;
	}
	
	.intro_text .textArea .text {
			font-size: 15px;
			width: 90%;
			margin: 1rem auto 0;
			text-align: left;
	}
	
	.intro_text .textArea h2 .intro_maintit_block {
			margin-top: -0.5rem;
			width: 80%;
	}
	
	.intro_text .intro_illust10 {
			width: 22%;
			bottom: -5px;
			z-index: 0;
	}
	
	.intro_text .intro_illust11 {
			transform: rotate(30deg);
			left: 18%;
			bottom: 12%;
			width: 10%;
	}
	
	.intro_text {
			margin-top: 1rem;
			padding-top:4rem;
	}
	
	.intro_text .intro_illust13 {
			width: 8%;
			bottom: 5%;
			left: 30%;
	}
	
	.intro_text .intro_illust14 {
			width: 15%;
			right: 25%;
	}
	
	.intro_text .intro_illust16 {
			display: none;
	}
	
	.intro_text .textArea .text p br {
			display: none;
	}
	
	.titArea .main_logo {
			width: 50%;
	}
	
	.topicArea > h2:before {
			width: 210px;
			top: -100px;
	}
	
	.topicArea h2 .topic_tit {
			width: 75%;
	}
	
	.topicArea > h2 small {
			margin-top: 0.5rem;
			font-size: 0.88em;
	}
	
	.topicArea h2 .topic_tit:before {
			width: 80px;
			height: 50px;
			left: -100px;
			top: -10px;
	}
	
	.topicArea {
			padding: 3rem 0 5rem;
	}
	
	.topicArea h2 .topic_tit:after {
			width: 60px;
			height: 60px;
			right: -60px;
			top: -20px;
	}
	
	.intro_text .textArea {
			padding-bottom: 7.5rem;
	}
	
	.topic_illust01 {
			display: none;
	}
	
	.topic_illust04 {
			width: 13%;
			top: 7%;
			right:0;
	}
	
	.bnrArea {
			padding: 2rem 0;
	}
	
	.topicArea:after {
			bottom: -10px;
	}
	
	.topic_illust02 {
			width: 15%;
			left:0;
	}
	
	.topic_illust03 {
			left: 15%;
			bottom: 5%;
			width: 4%;
	}
	
	.bnrArea ul {
			display: block;
	}
	
	.bnrArea ul li {
			width: 80%;
			margin: 0 auto;
	}
	
	.bnrArea ul .copy {
			width: 85%;
			margin: 0 auto;
			display: block;
			position: relative;
			top: 15px;
	}
	
	.bnrArea ul li .cap {
			font-size: 14px;
	}
	
	.ytArea h2 .ico_yt {
			width: 12%;
	}
	
	.ytArea h2 .logo_yt {
			width: 25%;
	}
	
	.text_yt {
			font-size: 1.7rem;
	}
	
	.ytArea .playArea {
			height: 270px;
			width: 480px;
	}
	
	.waveArea:before {
			top: 21%;
	}
	
	.yt_illust01 {
			top: 90%;
			width: 12%;
			left: 0;
	}
	
	.yt_illust02 {
			top: 80%;
			width: 12%;
			left: 0;
			transform: rotate(10deg);
	}
	
	.yt_illust03 {
			width: 12%;
			top: 90%;
			right: 0;
	}
	
	.yt_illust04 {
			top: 80%;
			width: 15%;
			right: 0;
	}
	.ytArea .more {
			padding: 1.1rem 5rem;
	}
	.ad dl {
			display: block;
	}
	
	.ad dt {
			width: 70%;
			margin: 0 auto;
			padding: 1rem 0 0;
	}
	
	.ad dd {
			width: 100%;
			margin: 0 auto;
	}
	
	.ad h3 {
			font-size: 20px;
			line-height: 1.7;
	}
	
	.ad h3 i {
			line-height: 1;
	}
	
	.ad dd .text {
			font-size: 15px;
	}
	
	.ad .more {
			margin-top: 1rem;
	}
	
	.ad {
			border-width: 3px;
			width: 90%;
			margin-left: auto;
			margin-right: auto;
			padding: 0 1rem 2rem;
	}
	
	.toppage .contents {
			padding-bottom: 5rem;
	}
}

@media screen and (max-width: 480px) {
	.intro .slider li .photo01 {
			width: 32vw;
			height: 32vw;
			top: -8vw;
			left: -8vw;
			background-position: top left;
			background-size:contain;
	}
	
	.titArea .sub {
			font-size: 1rem;
	}
	
	.intro .titArea {
			padding: 2rem 0 0;
	}
	
	.intro .slider li .photo03 {
			top: -8vw;
			width:28vw;
			height:28vw;
			right:-1vw;
			background-position: top 10px center;
	}
	
	.intro .slider li .ico_free {
			right: -5%;
			top: 30%;
			width: 22%;
	}
	
	.titArea .main_logo {
			width: 60%;
			margin: 0.5rem auto;
	}
	
	.intro .slider li .illust {
			top: 60%;
			right: 5%;
			width: 7%;
			transform: rotate(
	250deg);
	}
	
	.intro .slider li .illust01 {
			left: 5%;
			width: 7%;
			top: 50%;
	}
	
	.intro .slider li .illust03 {
			width: 12%;
			top: 55%;
	}
	
	.intro .slider li {
			height: 184px;
	}
	
	.intro_text .intro_illust02 {
			width: 25%;
			top: -10%;
	}
	
	.intro_text .intro_illust03 {
			width: 15%;
			left: 30%;
	}
	
	.intro_text .intro_illust04 {
			width: 7%;
			left: 2%;
			top: 15%;
	}
	
	.intro_text .intro_illust05 {
			width: 9%;
			top: -20%;
			left: 5%;
	}
	
	.intro_text .intro_illust06 {
			width: 10%;
			right: 0;
			top: 15%;
	}
	
	.intro_text .intro_illust07 {
			width: 14%;
			top: -15%;
			right: 30%;
	}
	
	.intro_text .intro_illust08 {
			width: 25%;
			top: -15%;
	}
	
	.intro_main_tit01 {
			width: 55%;
	}
	
	.intro_text .textArea h2 .intro_maintit_block {
			display: block;
			margin-top: -1rem;
	}
	
	.intro_text .textArea h2 .intro_maintit_block .intro_main_tit02 {
			width: 70%;
			margin: 0 auto 0.5rem;
	}
		
	.intro_text .textArea h2 .intro_maintit_block span {
			display: block;
	}
	
	.intro_text .textArea h2 .intro_maintit_block .intro_main_tit03 {
			margin-left: 1rem;
	}
	
	.intro_text .intro_illust10 {
			width: 35%;
	}
	
	.intro_text .intro_illust11 {
			width: 15%;
			left: 25%;
	}
	
	.intro_text .intro_illust13 {
			display: none;
	}
	
	.intro_text .intro_illust16 {
			display: none;
	}
	
	.intro_text .intro_illust14 {
			width: 22%;
			right: 30%;
	}
	
	.topic_illust04 {
			display: none;
	}
	
	.topicArea > h2:before {
		display:none;
	}
	
	
	.topicArea {
			padding:0 0 3rem;
	}
	.topicArea h2 {
		margin:0.5rem auto;
	}
	
	.topicArea h2 .topic_tit:before {
			width: 60px;
			height: 40px;
			left: -20px;
	}
	.topicArea h2 .topic_tit {
			width: 50%;
	}
	.topicArea h2 .topic_tit:after {
			width: 40px;
			height: 40px;
			right: -20px;
			top: -10px;
	}
	
	.topicArea:after {
			bottom: -30px;
	}
	
	.topic_illust02 {
			width: 20%;
	}
	
	.topic_illust03 {
			width: 8%;
			left: 20%;
			bottom: 3%;
	}
	
	.bnrArea ul li {
			width: 90%;
    margin: 0 auto 0.5em;
	}
	
	.bnrArea ul .copy {
			width: 90%;
	}
	
	.text_yt {
			display: block;
			margin-top: 0.2rem;
			font-size: 1.5rem;
	}
	
	.ytArea h2 {
			display: block;
	}
	
	.ytArea h2 .ico_yt, .ytArea h2 .logo_yt {
			display: inline-block;
	}
	
	.ytArea h2 .ico_yt {
			width: 18%;
	}
	
	.ytArea h2 .logo_yt {
			width: 40%;
	}
	
	.ytArea .playArea {
			width: 320px;
			height: 180px;
	}
	
	.waveArea:before {
			top: 23%;
	}
	
	.yt_illust02, .yt_illust04 {
			display: none;
	}
	
	.yt_illust01 {
			width: 18%;
			top: 97%;
	}
	
	.yt_illust03 {
			width: 17%;
			top: 97%;
	}
	
	.ad h3 {
			font-size: 1.1rem;
			line-height: 1.6;
	}
	
	.ad .more {
			padding: 1rem 0;
			width: 90%;
	}
	
}

/* pickup Block */
.pickup_list {
	max-width:840px;
	padding:0 0.5rem;
}

.pickup_list li {
	padding:0.5rem 0 0.25rem;
	border-bottom:2px dotted #ccc;
}
.pickup_list > li:last-child {
	border-bottom:none;
}

.pickup_list li a {
	display:flex;
	align-items:flex-start;
  color: #434343;
  line-height: 1.6;
  margin: 0 auto;
}

.pickup_list li a .img {
	width:20%;
  border-radius: 10px;
  overflow: hidden;
  border: #ccc 1px solid;
}

.pickup_list li .img img {
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}
.pickup_list li a:hover .img img {    
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
    opacity: 1.0;
}

.pickup_list li a .summary {
	width:80%;
	padding:0 0 0 2rem;
}
.pickup_list li .cate {
    font-size: 14px;
    padding: 0.5rem 20px 0.5rem 45px;
    background-color: #fff;
    border-radius: 100px;
    color: #fb7481;
    border: #fb7481 1px solid;
    display: table;
    margin: 0 0 0.5rem 0;
    position: relative;
}
.pickup_list li .cate i {
    position: absolute;
    background-color: #fb7481;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    left: -10px;
    top: -5px;
}

.pickup_list li .cate i:before {
    content: '';
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    width: 30px;
    height: 36px;
    background-image: url(/src/img/common/nv_gourmet_white.png);
    top: 8px;
    left: 10px;
    z-index: 10;
    position: absolute;
}
.pickup_list li .cate02 {
    color: #54c1f5;
    border-color: #54c1f5;
}

.pickup_list li .cate02 i {
    background-color: #54c1f5;
}

.pickup_list li .cate02 i:before {
    background-image: url(/src/img/common/nv_hataracco_white.png);
    top: 5px;
}
.pickup_list li .cate03 {
    color: #f9a512;
    border-color: #f9a512;
}

.pickup_list li .cate03 i {
    background-color: #f9a512;
}

.pickup_list li .cate03 i:before {
    background-image: url(/src/img/common/nv_happylife_white.png);
}
.pickup_list li .cate04 {
    color: #84c423;
    border-color: #84c423;
}

.pickup_list li .cate04 i {
    background-color: #84c423;
}

.pickup_list li .cate04 i:before {
    background-image: url(/src/img/common/nv_school_white.png);
}
.pickup_list li .cate05 {
    color: #729dfa;
    border-color: #729dfa;
}

.pickup_list li .cate05 i {
    background-color: #729dfa;
}

.pickup_list li .cate05 i:before {
    background-image: url(/src/img/common/nv_interview_white.png);
}
.pickup_list li .cate06 {
    color: #f5956c;
    border-color: #f5956c;
}

.pickup_list li .cate06 i {
    background-color: #f5956c;
}

.pickup_list li .cate06 i:before {
    background-image: url(/src/img/common/nv_newstopics_white.png);
    background-size: 34px;
}
.pickup_list li a h2 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.1rem;
}

.pickup_list li a .text {
    font-size: 1rem;
}
@media screen and (max-width: 750px) {
.pickup_list li a .img {
	width:25%;
}
.pickup_list li a .summary {
	width:75%;
	padding:0 0 0 0.5rem;
}
.pickup_list li a .cate i,
.pickup_list li a .text,
.pickup_list li a .text2 {
	display:none;
}

.pickup_list li .cate {
  padding: 0.25rem 1rem;
  border-radius: 2rem;
  margin: 0 0 0.25rem 0;
}
.pickup_list li .summary h2 {
	margin:0.25rem auto;
	font-size:1rem;
	line-height:1.1;
}

}
@media screen and (max-width: 480px) {
.pickup_list li .cate {
  padding: 0rem 0.75rem;
	font-size:12px;
}
}