@charset "UTF-8";
/* CSS Document */

@keyframes back_color1{
	0%{ background-color: rgba(255,255,255,0); color: #00a0e9;}
	100%{ background-color: #00a0e9; color: #fff;}
}
@keyframes back_color2{
	0%{ background-color: rgba(255,255,255,0); color: #fff100;}
	100%{ background-color: #fff100; color: #231815;}
}
@keyframes back_color3{
	0%{ transform: translate(0px, 0px);}
	100%{ transform: translate(10px, 10px);}
}

/* ナルホド！ワカチク トップ */
@media (min-width: 768px){
	.naruhodo_main{ max-width: 1480px; margin: 50px auto 0;}
}
@media (max-width: 767.98px){
	.top_bottom_img{ background-position: top 0 right -52px; height: 230px; background-size: 220px; background-repeat: no-repeat; position: relative; top: -220px; margin: 0 0 -220px auto; width: 50%;}
}

@media (min-width: 768px){
	.top_link{ display: flex; flex-wrap: wrap; justify-content: left; margin: 80px 0 0;}
	.top_link a{ width: 350px; height: 350px; margin: 0 0 40px 0; border-radius: 0 0 40px 0; position: relative; background-size: cover; background-position: center;}
	.top_link a:nth-child(5),.top_link a:nth-child(6),.top_link a:nth-child(7),.top_link a:nth-child(8){ margin: 0;}
	.top_link a:nth-child(3n+2){ margin-right: 30px; margin-left: 30px;}
	.top_link a h2{ border-radius: 10px 0 0 10px; font-size: 19px; position: absolute; right: 0; top: 30px; padding: 10px 10px; width: 270px;}
	.top_link a:nth-child(1) h2,.top_link a:nth-child(3) h2,.top_link a:nth-child(5) h2,.top_link a:nth-child(7) h2,.top_link a:nth-child(9) h2{ border-top: 3px solid #00a0e9; border-bottom: 3px solid #00a0e9; border-left: 3px solid #00a0e9; background-color: rgba(255,255,255,0.85); color: #00a0e9; margin: 0;}
	.top_link a:nth-child(2) h2,.top_link a:nth-child(4) h2,.top_link a:nth-child(6) h2,.top_link a:nth-child(8) h2{ border-top: 3px solid #fff100; border-bottom: 3px solid #fff100; border-left: 3px solid #fff100; background-color: rgba(13,54,123,0.45); color: #fff100; margin: 0;}
	.top_link a:nth-child(1):hover h2,.top_link a:nth-child(3):hover h2,.top_link a:nth-child(5):hover h2,.top_link a:nth-child(7):hover h2,.top_link a:nth-child(9):hover h2{ text-decoration: none; animation: back_color1 0.5s ease 0s 1 both;}
	.top_link a:nth-child(2):hover h2,.top_link a:nth-child(4):hover h2,.top_link a:nth-child(6):hover h2,.top_link a:nth-child(8):hover h2{ text-decoration: none; animation: back_color2 0.5s ease 0s 1 both;}
	.top_link a:nth-child(1)::before,.top_link a:nth-child(3)::before,.top_link a:nth-child(5)::before,.top_link a:nth-child(7)::before,.top_link a:nth-child(9)::before{ content: ""; width: 350px; height: 350px; background-color: #00a0e9; position: absolute; z-index: -1; right: 0px; bottom: 0px; border-radius: 0 0 40px 0;}
	.top_link a:nth-child(2):before,.top_link a:nth-child(4):before,.top_link a:nth-child(6):before,.top_link a:nth-child(8):before{ content: ""; width: 350px; height: 350px; background-color: #fff100; position: absolute; z-index: -1; right: 0px; bottom: 0px; border-radius: 0 0 40px 0;}
	.top_link a:hover::before{ animation: back_color3 0.2s ease 0s 1 both;}
}
@media (max-width: 767.98px){
	.top_link{ display: flex; flex-wrap: wrap; justify-content: space-between; margin: 60px 15px 15px;}
	.top_link a{ width: 48%; height: 230px; margin: 0 0 25px 0; border-radius: 0 0 30px 0; position: relative; background-size: cover; background-position: center;}
	.top_link a:nth-child(9){ margin-bottom: 0;}
	.top_link a h2{ border-radius: 10px 0 0 10px; font-size: 14px; position: absolute; right: 0; top: 20px; padding: 10px 10px; width: 150px;}
	.top_link a:nth-child(1) h2,.top_link a:nth-child(3) h2,.top_link a:nth-child(5) h2,.top_link a:nth-child(7) h2,.top_link a:nth-child(9) h2{ border-top: 3px solid #00a0e9; border-bottom: 3px solid #00a0e9; border-left: 3px solid #00a0e9; background-color: rgba(255,255,255,0.85); color: #00a0e9; margin: 0;}
	.top_link a:nth-child(2) h2,.top_link a:nth-child(4) h2,.top_link a:nth-child(6) h2,.top_link a:nth-child(8) h2{ border-top: 3px solid #fff100; border-bottom: 3px solid #fff100; border-left: 3px solid #fff100; background-color: rgba(13,54,123,0.45); color: #fff100; margin: 0;}
}


/* ナルホド！ワカチク 記事1 */
@media (min-width: 768px){
	.artile1_flex_box{ display: flex; flex-wrap: wrap; margin: 80px 0 80px;}
	.artile1_flex_box>div{ width: 100%; display: flex; align-items: center; justify-content: center;}
	.artile1_flex_box>div .artile1_flex_image{ width: 280px;}
	.artile1_flex_box>div .artile1_flex_text{ width: 500px; padding: 0 25px 0 0;}
	.artile1_flex_box>div .artile1_flex_text p{ margin: 0;}
	.artile1_flex_box>div .artile1_flex_image img{ border-radius: 50%; padding: 0;}
	.artile1_flex_box>div:nth-child(even) .artile1_flex_text{ padding: 0 0 0 25px;}
	
	.article_image_flex{ display: flex; align-items: end;}
	.article_image_flex p{ margin: 20px 0 0;}
	.article_image_flex>div:nth-child(1){ width: 500px; padding: 0 0 80px 0;}
	.article_image_flex>div:nth-child(2){ width: calc(100% - 500px); display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 0 0 0 60px;}
	.article_image_flex>div:nth-child(2)>div{ width: 100%; text-align: center;}
	.article_image_flex>div:nth-child(2) img{ width: 320px; padding: 0px 30px 0; position: relative; top: 20px;}
}
@media (max-width: 767.98px){
	.artile1_flex_box{ display: flex; flex-wrap: wrap; margin: 50px 0 50px;}
	.artile1_flex_box>div{ width: 100%; display: flex; align-items: flex-start; justify-content: center; margin: 0 0 30px 0;}
	.artile1_flex_box>div:last-child{ margin: 0;}
	.artile1_flex_box>div .artile1_flex_image{ width: 150px;}
	.artile1_flex_box>div .artile1_flex_text{ width: calc(100% - 150px); padding: 0 15px 0 0;}
	.artile1_flex_box>div .artile1_flex_text p{ margin: 0;}
	.artile1_flex_box>div .artile1_flex_image img{ border-radius: 50%; padding: 0;}
	.artile1_flex_box>div:nth-child(even) .artile1_flex_text{ padding: 0 0 0 25px;}
	
	.article_image_flex{ display: flex; flex-wrap: wrap;}
	.article_image_flex p{ margin: 15px 0;}
	.article_image_flex>div:nth-child(1){ width: 100%; padding: 0;}
	.article_image_flex>div:nth-child(2){ width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column;}
	.article_image_flex>div:nth-child(2)>div{ width: 100%; text-align: center;}
	.article_image_flex>div:nth-child(2) img{ width: 60%; padding: 0px 10px 0; position: relative; top: 20px;}
}


/* ナルホド！ワカチク 記事2 */
@media (min-width: 768px){
	.artile2_flex_box{ display: flex; font-size: 16px; justify-content: space-between; margin: 80px 0;}
	.artile2_flex_box>div{ width: 100%;}
	.artile2_flex_box>div p{ text-align: center; margin: 5px 0 0 0;}
	.artile2_flex_box>div:nth-child(1){ width: calc(100% - 280px);}
	.artile2_flex_box>div:nth-child(2){ width: 250px; margin: 0 0 0 30px;}
	.artile2_flex_box>div:nth-child(2) img{ border-radius: 50%; width: 250px;}
	
	.artile2_flex_box2{ display: flex; flex-wrap: wrap; margin: 80px 0; font-size: 16px;}
	.artile2_flex_box2>div{ width: 47%; text-align: center;}
	.artile2_flex_box2>div p{ text-align: center; margin: 5px 0 0 0;}
	.artile2_flex_box2>div img{ height: 290px;}
	.artile2_flex_box2>div:nth-child(odd){ margin: 0 3% 0 0;}
	.artile2_flex_box2>div:nth-child(even){ margin: 0 0 0 3%;}

	.article_image_flex2{ display: flex; align-items: center; justify-content: center;}
	.article_image_flex2>div:nth-child(1){ width: 440px; padding: 0;}
	.article_image_flex2>div:nth-child(2){ width: calc(100% - 550px); display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 0 0 0 20px;}
	.article_image_flex2>div:nth-child(2)>div{ width: 100%; text-align: center;}
	.article_image_flex2>div:nth-child(2) img{ width: 230px; padding: 0px 30px 0; position: relative; top: 20px;}
	.article_image_flex2 .article_text2 p{ margin: 0;}
	.article_text2{ color: #00a0e9; text-align: center; border-radius: 20px; padding: 40px 50px; z-index: 1; border: 5px solid #00a0e9;}
	.article_text2 span{ color: #00a0e9; font-size: 22px; display: block; margin: 0 0 10px 0;}
	
	.banner_box{ text-align: center; margin: 40px 0 0 0;}
	.banner_box img{ width: 700px;}
}
@media (max-width: 767.98px){
	.artile2_flex_box{ display: flex; flex-wrap: wrap; justify-content: space-between; margin: 50px 0 30px;}
	.artile2_flex_box>div{ width: 100%;}
	.artile2_flex_box>div p{ text-align: center; margin: 5px 0 0 0; font-size: 14px;}
	.artile2_flex_box>div p small{ display: block;}
	.artile2_flex_box>div:nth-child(1){ width: 100%; margin: 0 0 30px 0;}
	.artile2_flex_box>div:nth-child(2){ width: 100%; text-align: center;}
	.artile2_flex_box>div:nth-child(2) img{ border-radius: 50%; width: 220px;}
	
	.artile2_flex_box2{ display: flex; flex-wrap: wrap; margin: 30px 0 50px; font-size: 14px;}
	.artile2_flex_box2>div{ width: 100%; text-align: center;}
	.artile2_flex_box2>div p{ text-align: center; margin: 5px 0 0 0;}
	.artile2_flex_box2>div img{ width: 100%;}
	.artile2_flex_box2>div:nth-child(odd){ margin: 0 0 30px 0;}
	.artile2_flex_box2>div:nth-child(even){ margin: 0 0 0 0;}

	.article_image_flex2{ display: flex; width: 100%; flex-wrap: wrap; align-items: center; justify-content: center;}
	.article_image_flex2 p{ margin: 0;}
	.article_image_flex2>div:nth-child(1){ width: 100%; padding: 0 0 30px 0;}
	.article_image_flex2>div:nth-child(2){ width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 0 0 0 20px;}
	.article_image_flex2>div:nth-child(2)>div{ width: 100%; text-align: center;}
	.article_image_flex2>div:nth-child(2) img{ width: 47%; padding: 0px 10px 0; position: relative; top: 20px;}
	.article_text2{ color: #00a0e9; text-align: center; border-radius: 20px; padding: 20px 20px; z-index: 1; border: 5px solid #00a0e9;}
	.article_text2 span{ color: #00a0e9; font-size: 16px; display: block; margin: 0 0 5px 0;}
	
	.banner_box{ text-align: center; margin: 30px 0 0 0;}
	.banner_box img{ width: 100%;}
}


/* ナルホド！ワカチク 記事3 */
@media (min-width: 768px){
	.article_image_flex3{ display: flex; justify-content: center; align-items: end; margin: 80px 0 0 0;}
	.article_image_flex3 p{ margin: 20px 0 0;}
	.article_image_flex3>div:nth-child(1){ width: 500px; padding: 0 0 100px 0;}
	.article_image_flex3>div:nth-child(1) .article_text2{ background-color: #fff100; border-radius: 20px; padding: 20px; position: relative;
    right: -55px; z-index: 1;}
	.article_image_flex3>div:nth-child(1) .article_text2 p{ margin: 0;}
	.article_image_flex3>div:nth-child(2){ width: 440px; display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 0; z-index: 2; position: relative; left: -55px}
	.article_image_flex3>div:nth-child(2) img{ width: 440px; padding: 0 30px 0; position: relative; top: 10px;}
	
	.artile2_flex_box3{ display: flex; flex-wrap: wrap; margin: 80px 0 50px;}
	.artile2_flex_box32{ margin: 50px 0;}
	.artile2_flex_box3>div{ width: 48%;}
	.artile2_flex_box3>div p{ margin: 5px 0 0 0;}
	.artile2_flex_box3>div strong{ display: block; margin: 0 0 3px 0;}
	.artile2_flex_box3>div:nth-child(odd){ margin: 0 2% 0 0;}
	.artile2_flex_box3>div:nth-child(even){ margin: 0 0 0 2%;}
	
	.artile3_imageonly{ margin: 50px 0;}
	.artile3_imageonly p{ margin: 10px 0 0 0;}
	.artile3_imageonly img{ width: 100%;}
	.artile3_imageonly strong{ display: block; margin: 5px 0 3px;}
}
@media (max-width: 767.98px){
	.article_image_flex3{ display: flex; flex-wrap: wrap; margin:  50px 0 0 0;}
	.article_image_flex3 p{ margin: 15px 0;}
	.article_image_flex3>div:nth-child(1){ width: 100%; padding: 0;}
	.article_image_flex3>div:nth-child(1) .article_text2{ background-color: #fff100; border-radius: 20px; padding: 20px; font-size: 15px;}
	.article_image_flex3>div:nth-child(1) .article_text2 p{ margin: 0;}
	.article_image_flex3>div:nth-child(2){ width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column;}
	.article_image_flex3>div:nth-child(2)>div{ width: 100%; text-align: center;}
	.article_image_flex3>div:nth-child(2) img{ width: 80%; padding: 0px 10px 0; position: relative; top: 20px;}
	
	.artile2_flex_box3{ display: flex; flex-wrap: wrap; margin: 50px 0 30px; font-size: 14px;}
	.artile2_flex_box3>div{ width: 100%;}
	.artile2_flex_box3>div p{ margin: 5px 0 0 0;}
	.artile2_flex_box3>div strong{ display: block; margin: 0 0 3px 0;}
	.artile2_flex_box3>div img{ width: 100%;}
	.artile2_flex_box3>div:nth-child(odd){ margin: 0 0 30px 0;}
	.artile2_flex_box3>div:nth-child(even){ margin: 0 0 0 0;}
	
	.artile3_imageonly{ margin: 30px 0;}
	.artile3_imageonly p{ margin: 10px 0 0 0;}
	.artile3_imageonly img{ width: 100%;}
	.artile3_imageonly strong{ display: block; margin: 5px 0 3px;}
}


/* ナルホド！ワカチク 記事4 */
@media (min-width: 768px){
	.artile4_flex{ display: flex; align-items: center; justify-content: center; margin: 80px 0 60px 0;}
	.artile4_flex>div:nth-child(1){ width: 640px;}
	.artile4_flex>div:nth-child(1) .title3{ background-color: #00a0e9; color: #fff100; border-radius: 20px; padding: 20px; font-size: 26px; margin: 0 0 20px 0;}
	.artile4_flex>div:nth-child(2){ width: 310px; padding: 0 0 0 80px;}
	.artile4_flex>div:nth-child(2) img{ width: 230px;}
	
	.artile4_flex_b{ display: flex; align-items: center; justify-content: center; margin: 0 0 30px 0;}
	.artile4_flex_b>div:nth-child(1){ width: 430px; padding: 0 50px 0 0;}
	.artile4_flex_b>div:nth-child(1) img{ width: 380px;}
	.artile4_flex_b>div:nth-child(2){ width: 520px;}
	.artile4_flex_b>div:nth-child(2) .title3{ background-color: #00a0e9; color: #fff100; border-radius: 20px; padding: 20px; font-size: 26px; margin: 0 0 20px 0;}
	
	.artile4_flex_c{ display: flex; align-items: center; justify-content: center; margin: 0 0 60px 0;}
	.artile4_flex_c>div:nth-child(1){ width: 520px;}
	.artile4_flex_c>div:nth-child(2){ width: 430px; padding: 0 0 0 50px;}
	.artile4_flex_c>div:nth-child(2) img{ width: 380px;}
	
	.article_image_flex4{ display: flex; justify-content: center; align-items: end; margin: 80px 0 0 0;}
	.article_image_flex4 p{ margin: 20px 0 0;}
	.article_image_flex4>div:nth-child(1){ width: 400px; display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 0; z-index: 2; position: relative; left: 35px; top: -20px;}
	.article_image_flex4>div:nth-child(1) img{ width: 350px; padding: 0 30px 0;}
	.article_image_flex4>div:nth-child(2){ width: 600px; padding: 0 0 100px 0;}
	.article_image_flex4>div:nth-child(2) .article_text2{ background-color: #fff100; border-radius: 20px; padding: 20px 10px 20px 70px; position: relative; right: 40px; top: 30px; z-index: 1; border: 5px solid #00a0e9;}
	.article_image_flex4>div:nth-child(2) .article_text2 p{ margin: 0; text-align: left;}
	
	.artile4_imageonly{ margin-top: 80px;}
}
@media (max-width: 767.98px){
	.artile4_flex{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; margin: 50px 0 50px 0;}
	.artile4_flex>div:nth-child(1){ width: 100%; margin: 0 0 20px 0;}
	.artile4_flex>div:nth-child(1) .title3{ background-color: #00a0e9; color: #fff100; border-radius: 15px; padding: 15px; font-size: 18px; margin: 0 0 15px 0;}
	.artile4_flex>div:nth-child(1) p{ margin: 0;}
	.artile4_flex>div:nth-child(2){ width: 100%; text-align: center; padding: 0;}
	.artile4_flex>div:nth-child(2) img{ width: 230px;}
	
	.artile4_flex_b{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; margin: 0 0 20px 0;}
	.artile4_flex_b>div:nth-child(1){ width: 100%; padding: 0 0 20px 0;}
	.artile4_flex_b>div:nth-child(1) img{ width: 100%;}
	.artile4_flex_b>div:nth-child(2){ width: 100%;}
	.artile4_flex_b>div:nth-child(2) .title3{ background-color: #00a0e9; color: #fff100; border-radius: 15px; padding: 15px; font-size: 18px; margin: 0;}
	
	.artile4_flex_c{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; margin: 0;}
	.artile4_flex_c>div:nth-child(1){ width: 100%;}
	.artile4_flex_c>div:nth-child(2){ width: 100%; padding: 0;}
	.artile4_flex_c>div:nth-child(2) img{ width: 100%;}
	
	.article_image_flex4{ display: flex; justify-content: center; align-items: end; flex-wrap: wrap; flex-direction: column-reverse; margin: 50px 0 0 0;}
	.article_image_flex4 p{ margin: 20px 0 0; text-align: left;}
	.article_image_flex4>div:nth-child(1){ width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 0;}
	.article_image_flex4>div:nth-child(1) img{ width: 70%; padding: 20px 10px 0; position: relative; top: -30px;}
	.article_image_flex4>div:nth-child(2){ width: 100%; padding: 0;}
	.article_image_flex4>div:nth-child(2) .article_text2{ background-color: #fff100; border-radius: 20px; padding: 20px; border: 5px solid #00a0e9;}
	.article_image_flex4>div:nth-child(2) .article_text2 p{ margin: 0;}
	
	.artile4_imageonly{ margin-top: 50px;}
}