@charset "utf-8";
/*==============================
  animation
==============================*/
.js-fade {
	opacity: 0;
	transform: translateY(-40px);
	transition: 1s ease;
}
.js-fade.show {
	opacity: 1;
	transform: translateY(0);
}

#page_goodr h2 { background-color: transparent;}

/*==============================
  PC
==============================*/
@media only screen and (min-width: 768px) {
	.pane-header { margin-bottom: 0;}
	#page_goodr { font-size: 18px; line-height: 160%; background-color: #fff;}
	#page_goodr .sp { display: none !important;}
	#page_goodr .inner { max-width: 1200px; margin: 0 auto; padding: 100px 0;}
  
  #go_to_product { display: none; position: fixed; right: 20px; bottom: 20px; z-index: 10;}
  #go_to_product a { width: 135px; height: 141px; border-radius: 100px; font-size: 0; color: #fff; background: url(../../img/usr/freepage/goodr/icon_for_goods.png) center center no-repeat; display: block;}
  
  #page_goodr .all-goodr-goods { margin: 40px auto; text-align: center;}
  #page_goodr .all-goodr-goods a { width: 320px;  padding: 15px 0; margin: 0 auto; border: #77e6de 3px solid; font-size: 16px; font-weight: bold; text-align: center; color: #555; display: block; transition: 0.3s; position: relative;}
	#page_goodr .all-goodr-goods a:hover { background: rgba(119,230,222,0.15);}
  #page_goodr .all-goodr-goods a::after { content: ''; width: 14px; height: 10px; display: block; transition: 0.3s; position: absolute; right: 20px; top: calc(50% - 6px); background: url("../../img/usr/freepage/goodr/arrow_blue.png") center center no-repeat; -webkit-background-size: 14px 10px; background-size: 14px 10px; transform: rotate(-95deg);}
  
	#page_goodr h2 { padding: 0; margin: 0 0 80px; font-size: 42px; font-weight: bold; text-align: center; color: #555;}
	#page_goodr h2 img { height: auto;}
	#page_goodr h2 span { padding: 0; margin: 0; font-size: 42px; font-weight: bold; display: inline-block; position: relative; color: #555; z-index: 1;}
	#page_goodr h2 span::before { content: ''; width: 110%; height: 40px; display: block; position: absolute; bottom: -20px; left: -5%; background: rgba(250,218,24,0.8); transform: rotate(-2deg); z-index: -1;}
  
  /* メインビジュアル */
	#page_goodr .mv { padding: 0; text-align: center; opacity: 0; transition: 1s ease; background: url("../../img/usr/freepage/goodr/mv_bg.jpg") top center no-repeat; -webkit-background-size: 100% 100%; background-size: 100% 100%;}
	#page_goodr .mv.show { opacity: 1;}
	#page_goodr .mv .inner { max-width: 1200px; padding: 0; margin: 0 auto; position: relative;}
	#page_goodr .mv h1 { width: 535px; margin: 0; padding: 0; transition: 1s ease; opacity: 0; position: absolute; top: 42px; left: calc(50% - 267.5px);}
	#page_goodr .mv h1.show { opacity: 1;}
	#page_goodr .mv h1 img  { width: 100%; height: auto; vertical-align: top;}
	#page_goodr .mv .img { width: 100%; position: absolute; top: 0; transition: 1s ease; opacity: 0;}
	/* ページ内ナビ */
	#page_goodr #g_nav h2 { padding: 0; margin: 0 0 20px; font-size: 30px;}
	#page_goodr #g_nav .inner { padding: 100px 50px;}
	#page_goodr #g_nav .contents-list { margin-bottom: 20px; display: flex; justify-content: space-between;}
	#page_goodr #g_nav .contents-list li { width: 32%; flex-basis: 32%; text-align: center; position: relative;}
	#page_goodr #g_nav .contents-list li a { padding: 50px 0 65px; border: #77e6de 8px solid; font-size: 26px; font-weight: bold; text-align: center; color: #555; display: block; background: url(../../img/usr/freepage/goodr/arrow_blue.png) center calc(100% - 15px) no-repeat; transition: 0.3s;}
	#page_goodr #g_nav .contents-list li a:hover { background: rgba(119,230,222,0.15) url(../../img/usr/freepage/goodr/arrow_blue.png) center calc(100% - 8px) no-repeat;}
  
  #page_goodr .for-enquate-result { padding: 40px 0 30px; border: #77e6de 8px solid; text-align: center;}
  #page_goodr .for-enquate-result .ttl { margin: 0 0 15px 0; font-size: 26px; font-weight: bold; text-align: center; color: #555;}
  #page_goodr .for-enquate-result .txt { margin: 0 0 15px 0; font-size: 20px; text-align: center; color: #555;}
  #page_goodr .for-enquate-result .res { width: 660px; height: 90px; margin: 0 auto; background: url(../../img/usr/freepage/goodr/for_enquate_btn_bg.png) left center no-repeat;}
  #page_goodr .for-enquate-result .res a { width: 660px; height: 90px; border-radius: 90px; font-size: 26px; font-weight: bold; text-align: center; line-height: 90px; color: #08e1d1; background: url(../../img/usr/freepage/goodr/arrow_blue.png) calc(100% - 50px) 50% no-repeat; display: block; transition: 0.3s;}
	#page_goodr .for-enquate-result .res a:hover { background: rgba(119,230,222,0.15) url(../../img/usr/freepage/goodr/arrow_blue.png) calc(100% - 50px) calc(50% + 7px) no-repeat;}
  
  #page_goodr #g_nav .product-list { display: flex; justify-content: space-between;}
	#page_goodr #g_nav .product-list li { width: 19%; flex-basis: 19%; text-align: center; position: relative; overflow: hidden;}
	#page_goodr #g_nav .product-list li a { width: 100%; height: 100%; font-size: 22px; font-weight: bold; color: #fff; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.5) url(../../img/usr/freepage/goodr/arrow_white.png) center calc(100% - 15px) no-repeat; transition: 0.3s;}
	#page_goodr #g_nav .product-list li a:hover { background: rgba(0,0,0,0.5) url(../../img/usr/freepage/goodr/arrow_white.png) center calc(100% - 8px) no-repeat;}
	#page_goodr #g_nav .product-list li img { transition: 0.3s;}
  #page_goodr #g_nav .product-list li:hover img { transform: scale(1.2);}
  
	/* goodrとは */
	#page_goodr #g_about { padding: 0 50px; background: #f3f3f3 url("../../img/usr/freepage/goodr/movie_bg.jpg") center bottom no-repeat; -webkit-background-size: 100% auto; background-size: 100% auto; position: relative;}
	#page_goodr #g_about::before { content: ''; width: 100%; height: 100%; display: block; background: rgba(0,0,0,0.6); position: absolute; top: 0; left: 0;}
	#page_goodr #g_about .inner { max-width: 960px; margin: 0 auto; position: relative; z-index: 2;}
	#page_goodr #g_about h2 { margin-bottom: 40px; text-align: left;}
	#page_goodr #g_about h2 span { font-size: 28px; color: #fff;}
	#page_goodr #g_about h2 span::before { height: 20px; bottom: -6px; background: rgba(119,230,222,0.9);}
	#page_goodr #g_about .text { margin-bottom: 30px; color: #fff;}
	#page_goodr #g_about .movie-frame { max-width: 870px; height: 0; padding-bottom: 56.25%; margin: 0 auto; background: #fff; position: relative; overflow: hidden;}
	#page_goodr #g_about .movie-frame iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
	/* goodrの強み */
	#page_goodr #g_strong { padding: 0 50px; background: url("../../img/usr/freepage/goodr/bg_strong.jpg") top right no-repeat;}
	#page_goodr #g_strong .inner { max-width: 1100px; margin: 0 auto;}
	#page_goodr #g_strong li { padding: 30px 0 0 170px; margin-bottom: 60px;}
	#page_goodr #g_strong li.no01 { background: url("../../img/usr/freepage/goodr/num01.png") left top no-repeat;}
	#page_goodr #g_strong li.no02 { background: url("../../img/usr/freepage/goodr/num02.png") left top no-repeat;}
	#page_goodr #g_strong li.no03 { background: url("../../img/usr/freepage/goodr/num03.png") left top no-repeat;}
	#page_goodr #g_strong h3 { padding: 0; margin: 0 0 20px 0; line-height: 1.0; position: relative; z-index: 1;}
	#page_goodr #g_strong h3::before { content: ''; width: 100%; height: 8px; display: block; position: absolute; top: calc(50% - 8px); left: 0; background: rgba(250,218,24,0.8); z-index: -1;}
	#page_goodr #g_strong h3 span { padding-right: 30px; font-size: 34px; font-weight: bold; display: inline-block; background: #fff; color: #555;}
	/* モデル紹介 */
	#page_goodr #g_model { padding: 0 50px; background: #f3f3f3;}
	#page_goodr #g_model span::before { background: rgba(106,219,185,0.9);}
	#page_goodr #g_model ul li { margin: 60px 0 0 0; display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center;}
	#page_goodr #g_model ul li:nth-child(odd) { flex-direction: row-reverse;}
	#page_goodr #g_model li .image { width: 50%;}
	#page_goodr #g_model li .desc  { width: 45%;}
	#page_goodr #g_model li .desc h3 { margin: 0 0 20px 0; font-size: 36px; font-weight: bold;}
	#page_goodr #g_model li .desc h3 .sub { font-size: 24px; font-weight: normal;}
	#page_goodr #g_model ul li:nth-child(even) .desc h3 { text-align: right;}
	/* サイズの選び方 */
	#page_goodr #g_size { padding: 0 50px 140px; background: url("../../img/usr/freepage/goodr/bg_size.jpg") top left no-repeat, url("../../img/usr/freepage/goodr/bg_line.jpg") center bottom repeat-x; -webkit-background-size: auto auto, auto 140px; background-size: auto auto, auto 140px;}
	#page_goodr #g_size .size-list-nav { max-width: 800px; margin: 0 auto; display: flex; flex-wrap: wrap;}
	#page_goodr #g_size .size-list-nav li { width: 31%; padding: 30px 0; margin: 0 3.5% 3.5% 0; border: #fada18 6px solid; text-align: center; line-height: 1.2; font-size: 24px; font-weight: bold; display: block; background: #fff; transition: 0.3s; color: #555555; cursor: pointer;}
	#page_goodr #g_size .size-list-nav li:nth-child(3n) { margin: 0 0 3.5% 0;}
	#page_goodr #g_size .size-list-nav li:hover,
	#page_goodr #g_size .size-list-nav li.active { background: #fada18;}
  #page_goodr #g_size .size-list-contents { max-width: 800px; margin: 0 auto;}
  #page_goodr #g_size .size-list-contents li { margin-top: 60px; display: none;}
  #page_goodr #g_size .size-list-contents li.active { display: block;}
  #page_goodr #g_size .size-list-contents .text { font-size: 20px; text-align: left;}
  #page_goodr #g_size .size-list-contents .image { margin-top: 20px; border: #fada18 6px solid; text-align: center;}
  #page_goodr #g_size .size-list-contents .image img { width: 100%;}
	/* VISUMO */
	#page_goodr #g_visumo { padding: 0 50px; background: url("../../img/usr/freepage/goodr/bg_goodr.jpg") top right no-repeat;}  
	#page_goodr #g_visumo span::before { background: rgba(119,230,222,0.9); transform: rotate(-5deg);}
  #page_goodr #g_visumo .visumo-frame { max-width: 1000px; height: 400px; margin: 0 auto; font-size: 36px; font-weight: bold; display: flex; justify-content: center; align-items: center; background: #ddd; color: #fff;}
	/* モデル別商品詳細 */
	#page_goodr #g_products { padding: 0 50px;}
	#page_goodr #g_products .model-type-box { max-width: 1100px; margin: 0 auto 60px;}
	#page_goodr #g_products h2 { max-width: 1100px; padding: 50px 0; margin: 0 auto 80px; background: url("../../img/usr/freepage/goodr/bg_product.jpg") right center no-repeat; -webkit-background-size: cover; background-size: cover; color: #000 !important; position: relative; z-index: 1;}
	#page_goodr #g_products h2::before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(255,255,255,0.6); display: block; z-index: -1;}
	#page_goodr #g_products h2::after { content: ''; width: 98%; height: 90%; border: #fff 4px solid; position: absolute; top: 5%; left: 1%; background: none !important; display: block;}
	#page_goodr #g_products h3 { padding: 10px 0; text-align: center; font-size: 28px; font-weight: bold; background: #f2f2f2;}
	#page_goodr #g_products ul { padding: 0 50px; display: flex; flex-wrap: wrap;}
	#page_goodr #g_products li { width: 25%; padding: 0 10px 105px; margin: 30px 0 0 0; box-sizing: border-box; position: relative;}
	#page_goodr #g_products .image { margin: 0 0 10px 0; text-align: center;}
	#page_goodr #g_products .name  { font-size: 17px;}
	#page_goodr #g_products .price { width: calc(100% - 20px); font-size: 17px; color: #000; position: absolute; bottom: 70px; left: 10px;}
	#page_goodr #g_products .button  { width: calc(100% - 20px); position: absolute; bottom: 0; left: 10px;}
	#page_goodr #g_products .button a { padding: 17px 0; border: #000 3px solid; text-align: center; line-height: 1.0; font-size: 20px; font-weight: bold; display: block; transition: 0.3s;}
	#page_goodr #g_products .button a:hover { border: #b2996d 3px solid; color: #b2996d;}
	/* 最新情報をいち早く入手するには… */
	#page_goodr #g_info { padding: 0 50px; background: url("../../img/usr/freepage/goodr/bg_info.jpg") center 30% no-repeat; -webkit-background-size: 100% auto; background-size: 100% auto; position: relative;}
	#page_goodr #g_info::before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(255,255,255,0.8); z-index: 1; display: block;}
	#page_goodr #g_info h2 { margin-bottom: 60px; font-size: 32px;}
	#page_goodr #g_info h2 span { font-size: 32px;}
	#page_goodr #g_info h2 span::before { height: 20px; bottom: -10px; transform: rotate(0deg);}
	#page_goodr #g_info .inner { width: 900px; margin: 0 auto; position: relative; z-index: 2;}
	#page_goodr #g_info .buttons { padding: 0 30px; margin-top: 40px; display: flex; justify-content: space-between;}
	#page_goodr #g_info .buttons li { width: 47%;}
	#page_goodr #g_info .buttons li a { padding: 25px 0; text-align: center; line-height: 1.0; font-size: 24px; font-weight: bold; display: block; transition: 0.3s; color: #555555; background: #77e6de;}
	#page_goodr #g_info .buttons li a:hover { color: #555555; opacity: 0.7;}
}

/*==============================
  SP
==============================*/
@media only screen and (max-width: 767px) {
	#page_goodr { font-size: 14px; line-height: 160%; background-color: #fff;}
	#page_goodr .pc { display: none !important;}
	#page_goodr .inner { padding: 40px 15px;}
  
  #go_to_product { display: none; position: fixed; right: 10px; bottom: 10px; z-index: 10;}
  #go_to_product a { width: 70px; height: 70px; border-radius: 70px; font-size: 0; color: #fff; background: url(../../img/usr/freepage/goodr/icon_for_goods.png) center center no-repeat; -webkit-background-size: auto 70px; background-size: auto 70px; display: block;}
  
  #page_goodr .all-goodr-goods {
	margin: 30px auto 40px;
	padding: 0 15px;
	text-align: center;
}
  #page_goodr .all-goodr-goods a { width: 100%;  padding: 15px 0; margin: 0 auto; border: #77e6de 3px solid; font-size: 14px; font-weight: bold; text-align: center; text-decoration: none; color: #555; display: block; transition: 0.3s; position: relative;}
	#page_goodr .all-goodr-goods a:hover { background: rgba(119,230,222,0.15);}
  #page_goodr .all-goodr-goods a::after { content: ''; width: 14px; height: 10px; display: block; transition: 0.3s; position: absolute; right: 20px; top: calc(50% - 6px); background: url("../../img/usr/freepage/goodr/arrow_blue.png") center center no-repeat; -webkit-background-size: 14px 10px; background-size: 14px 10px; transform: rotate(-95deg);}
  
	#page_goodr h2 { padding: 0; margin: 0 0 35px; font-size: 22px; font-weight: bold; text-align: center; color: #555; background: none;}
	#page_goodr h2 img { height: auto;}
	#page_goodr h2 span { padding: 0; margin: 0; font-size: 22px; font-weight: bold; display: inline-block; position: relative; color: #555; z-index: 1;}
	#page_goodr h2 span::before { content: ''; width: 106%; height: 60%; display: block; position: absolute; bottom: -30%; left: -3%; background: rgba(250,218,24,0.8); transform: rotate(-2deg); z-index: -1;}
  
  /* メインビジュアル */
	#page_goodr .mv { padding: 15px 0; text-align: center; opacity: 0; transition: 1s ease; background: url("../../img/usr/freepage/goodr/mv_bg.jpg") top center no-repeat; -webkit-background-size: 100% 100%; background-size: 100% 100%;}
	#page_goodr .mv.show { opacity: 1;}
	#page_goodr .mv .inner { padding: 0; margin: 0 auto; position: relative;}
	#page_goodr .mv h1 { width: 80vw; margin: 0; padding: 0; transition: 1s ease; opacity: 0; position: absolute; top: 30vw; left: 10vw;}
	#page_goodr .mv h1.show { opacity: 1;}
	#page_goodr .mv h1 img  { width: 100%; height: auto; vertical-align: top;}
	#page_goodr .mv .img { width: 100%; position: absolute; top: 0; transition: 1s ease; opacity: 0;}
	/* ページ内ナビ */
	#page_goodr #g_nav h2 { padding: 0; margin: 0 0 20px; font-size: 22px;}
	#page_goodr #g_nav .contents-list { width: 70%; margin: 0 auto 15px;}
	#page_goodr #g_nav .contents-list li { margin-bottom: 10px; text-align: center; position: relative;}
	#page_goodr #g_nav .contents-list li a { padding: 20px 0 25px; border: #77e6de 4px solid; font-size: 18px; font-weight: bold; text-align: center; text-decoration: none; color: #555; display: block; background: url(../../img/usr/freepage/goodr/arrow_blue.png) center calc(100% - 8px) no-repeat; background-size: 14px 10px; transition: 0.3s;}
	#page_goodr #g_nav .contents-list li a:hover { background: rgba(119,230,222,0.15) url(../../img/usr/freepage/goodr/arrow_blue.png) center calc(100% - 8px) no-repeat; background-size: 14px 10px;}
  
  #page_goodr .for-enquate-result { padding: 30px 15px 20px; margin: 0; border: #77e6de 4px solid; text-align: center;}
  #page_goodr .for-enquate-result .ttl { margin: 0 0 15px 0; font-size: 18px; font-weight: bold; line-height: 1.4; text-align: center; color: #555;}
  #page_goodr .for-enquate-result .txt { margin: 0 0 15px 0; font-size: 13px; text-align: center; color: #555;}
  #page_goodr .for-enquate-result .res { width: 100%; height: 74px; margin: 0 auto; background: url(../../img/usr/freepage/goodr/for_enquate_btn_bg_sp.png) left center no-repeat; -webkit-background-size: 100% 100%; background-size: 100% 100%;}
  #page_goodr .for-enquate-result .res a { width: 100%; height: 74px; padding: 24px 0 0 0; border-radius: 74px; font-size: 18px; font-weight: bold; text-align: center; text-decoration: none; color: #08e1d1; display: block; background: url(../../img/usr/freepage/goodr/arrow_blue.png) center calc(100% - 8px) no-repeat; background-size: 14px 10px; transition: 0.3s;}
	#page_goodr .for-enquate-result .res a:hover { background: rgba(119,230,222,0.15) url(../../img/usr/freepage/goodr/arrow_blue.png) center calc(100% - 8px) no-repeat; background-size: 14px 10px;}
  
  #page_goodr #g_nav .product-list { display: flex; justify-content: center; flex-wrap: wrap;}
	#page_goodr #g_nav .product-list li { width: 48.5%; flex-basis: 48.5%; margin: 0 3% 3% 0; text-align: center; position: relative; overflow: hidden;}
	#page_goodr #g_nav .product-list li:nth-child(2n) { margin: 0 0 3% 0;}
	#page_goodr #g_nav .product-list li a { width: 100%; height: 100%; font-size: 16px; font-weight: bold; text-decoration: none; color: #fff; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.5) url(../../img/usr/freepage/goodr/arrow_white.png) center calc(100% - 15px) no-repeat; background-size: 14px 10px; transition: 0.3s;}
	#page_goodr #g_nav .product-list li a:hover { background: rgba(0,0,0,0.5) url(../../img/usr/freepage/goodr/arrow_white.png) center calc(100% - 8px) no-repeat; background-size: 14px 10px;}
	#page_goodr #g_nav .product-list li img { transition: 0.3s;}
  #page_goodr #g_nav .product-list li:hover img { transform: scale(1.2);}
	/* goodrとは */
	#page_goodr #g_about { background: #f3f3f3 url("../../img/usr/freepage/goodr/movie_bg.jpg") center bottom no-repeat; -webkit-background-size: auto 120%; background-size: auto 120%; position: relative;}
	#page_goodr #g_about::before { content: ''; width: 100%; height: 100%; display: block; background: rgba(0,0,0,0.6); position: absolute; top: 0; left: 0;}
	#page_goodr #g_about .inner { max-width: 800px; margin: 0 auto; position: relative; z-index: 2;}
	#page_goodr #g_about h2 { margin-bottom: 30px; text-align: center;}
	#page_goodr #g_about h2 span { font-size: 22px; color: #fff;}
	#page_goodr #g_about h2 span::before { height: 50%; background: rgba(119,230,222,0.9);}
	#page_goodr #g_about .text { margin-bottom: 30px; color: #fff;}
	#page_goodr #g_about .movie-frame { max-width: 800px; height: 0; padding-bottom: 56.25%; margin: 0 auto; background: #fff; position: relative; overflow: hidden;}
	#page_goodr #g_about .movie-frame iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
	/* goodrの強み */
	#page_goodr #g_strong { background: url("../../img/usr/freepage/goodr/bg_strong.jpg") top right no-repeat; -webkit-background-size: 60% auto; background-size: 60% auto;}
	#page_goodr #g_strong .inner { max-width: 800px; margin: 0 auto;}
	#page_goodr #g_strong li { margin-top: 30px;}
	#page_goodr #g_strong li.no01 h3 { background: url("../../img/usr/freepage/goodr/num01.png") left top no-repeat; -webkit-background-size: 50px auto; background-size: 50px auto;}
	#page_goodr #g_strong li.no02 h3 { background: url("../../img/usr/freepage/goodr/num02.png") left top no-repeat; -webkit-background-size: 50px auto; background-size: 50px auto;}
	#page_goodr #g_strong li.no03 h3 { background: url("../../img/usr/freepage/goodr/num03.png") left top no-repeat; -webkit-background-size: 50px auto; background-size: 50px auto;}
	#page_goodr #g_strong h3 { padding: 6px 0 20px 70px; margin: 0; line-height: 1.0; position: relative; z-index: 1; overflow: hidden;}
	#page_goodr #g_strong h3 span::before { content: ''; width: 100vw; height: 4px; display: block; position: absolute; top: calc(50% - 4px); right: -100vw; background: rgba(250,218,24,0.8); z-index: 1;}
	#page_goodr #g_strong h3 span { padding-right: 15px; font-size: 18px; font-weight: bold; display: inline-block; color: #555; position: relative;}
	/* モデル紹介 */
	#page_goodr #g_model { background: #f3f3f3;}
	#page_goodr #g_model .inner { padding: 50px 25px 10px;}
	#page_goodr #g_model span::before { background: rgba(106,219,185,0.9);}
	#page_goodr #g_model ul li { margin: 0 0 40px 0;}
	#page_goodr #g_model li .image { padding: 0 10px; margin-bottom: 20px; text-align: center;}
	#page_goodr #g_model li .desc h3 { padding: 0; margin: 0 0 10px 0; font-size: 22px; font-weight: bold;}
	#page_goodr #g_model li .desc h3 .sub { font-size: 16px; font-weight: normal;}
	/* サイズの選び方 */
	#page_goodr #g_size { padding: 0 0 60px; background: url("../../img/usr/freepage/goodr/bg_size.jpg") top left no-repeat, url("../../img/usr/freepage/goodr/bg_line.jpg") -10px bottom repeat-x; -webkit-background-size: 60% auto, auto 60px; background-size: 60% auto, auto 60px;}
	#page_goodr #g_size .size-list-nav { max-width: 800px; margin: 0 auto; display: flex; flex-wrap: wrap;}
	#page_goodr #g_size .size-list-nav li { width: 32%; padding: 10px 0; margin: 0 2% 2% 0; border: #fada18 2px solid; text-align: center; line-height: 1.2; font-size: 13px; font-weight: bold; display: block; background: #fff; transition: 0.3s; color: #555555; cursor: pointer;}
	#page_goodr #g_size .size-list-nav li:nth-child(3n) { margin: 0 0 2% 0;}
	#page_goodr #g_size .size-list-nav li:hover,
	#page_goodr #g_size .size-list-nav li.active { background: #fada18;}
  #page_goodr #g_size .size-list-contents { max-width: 800px; margin: 0 auto;}
  #page_goodr #g_size .size-list-contents li { margin-top: 20px; display: none;}
  #page_goodr #g_size .size-list-contents li.active { display: block;}
  #page_goodr #g_size .size-list-contents .text { font-size: 14px; font-weight: normal; text-align: left;}
  #page_goodr #g_size .size-list-contents .image { margin-top: 15px; border: #fada18 4px solid; text-align: center;}
  #page_goodr #g_size .size-list-contents .image img { width: 100%;}
	/* VISUMO */
	#page_goodr #g_visumo { background: url("../../img/usr/freepage/goodr/bg_goodr.jpg") top right no-repeat; -webkit-background-size: 60% auto; background-size: 60% auto;}
	#page_goodr #g_visumo span::before { background: rgba(119,230,222,0.9); transform: rotate(-5deg);}
  #page_goodr #g_visumo .visumo-frame { max-width: 800px; height: 400px; margin: 0 auto; font-size: 36px; font-weight: bold; display: flex; justify-content: center; align-items: center; background: #ddd; color: #fff;}
	/* モデル別商品詳細 */
	#page_goodr #g_products .inner { padding-bottom: 20px;}
	#page_goodr #g_products .model-type-box { max-width: 800px; margin: 0 auto 40px;}
	#page_goodr #g_products h2 { padding: 30px 0; margin: 0 auto 20px; background: url("../../img/usr/freepage/goodr/bg_product.jpg") -40vw center no-repeat; -webkit-background-size: cover; background-size: cover; color: #000 !important; position: relative; z-index: 1;}
	#page_goodr #g_products h2::before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(255,255,255,0.6); display: block; z-index: -1;}
	#page_goodr #g_products h2::after { content: ''; width: 98%; height: 90%; border: #fff 2px solid; position: absolute; top: 5%; left: 1%; background: none !important; display: block;}
	#page_goodr #g_products h3 { padding: 10px 0; text-align: center; font-size: 24px; font-weight: bold; background: #f2f2f2;}
	#page_goodr #g_products ul { display: flex; justify-content: space-between; flex-wrap: wrap;}
	#page_goodr #g_products li { width: 48%; padding: 0 0 85px 0; margin: 5% 0 0 0; box-sizing: border-box; position: relative;}
	#page_goodr #g_products .image { margin: 0; text-align: center;}
	#page_goodr #g_products .name  { font-size: 14px;}
	#page_goodr #g_products .price { width: calc(100% - 20px); font-size: 14px; color: #000; position: absolute; bottom: 55px; left: 0;}
	#page_goodr #g_products .button { width: 100%; position: absolute; bottom: 0; left: 0;}
	#page_goodr #g_products .button a { padding: 12px 0; border: #000 3px solid; text-align: center; text-decoration: none; line-height: 1.0; font-size: 18px; font-weight: bold; display: block; transition: 0.3s;}
	#page_goodr #g_products .button a:hover { border: #b2996d 3px solid; color: #b2996d;}
  
	/* 最新情報をいち早く入手するには… */
	#page_goodr #g_info { margin-bottom: 30px; background: url("../../img/usr/freepage/goodr/bg_info.jpg") center 30% no-repeat; -webkit-background-size: 120% auto; background-size: 120% auto; position: relative;}
	#page_goodr #g_info::before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(255,255,255,0.8); z-index: 1; display: block;}
	#page_goodr #g_info .inner { position: relative; z-index: 2;}
	#page_goodr #g_info h2 { margin-bottom: 30px; font-size: 16px;}
	#page_goodr #g_info h2 span { font-size: 16px;}
	#page_goodr #g_info h2 span::before { transform: rotate(0deg);}
	#page_goodr #g_info .buttons { width: 70%; margin: 20px auto 0;}
	#page_goodr #g_info .buttons li { margin-bottom: 10px; text-align: center;}
	#page_goodr #g_info .buttons li a { padding: 15px 0; text-align: center; text-decoration: none; line-height: 1.0; font-size: 14px; font-weight: bold; display: block; transition: 0.3s; color: #555555; background: #77e6de;}
	#page_goodr #g_info .buttons li a:hover { color: #555555; opacity: 0.7;}
}

/*==============================
  goodrユーザーアンケート結果
==============================*/
#page_goodr #g_enquate .result-graph li { margin-bottom: 10px;}
#page_goodr #g_enquate .result-graph li dl { width: 100%; display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; position: relative;}
#page_goodr #g_enquate .result-graph li dl::before { content: ''; width: 0; height: 100%; border-radius: 3px; position: absolute; top: 0; left: 0; background: #f3f3f3; display: block; z-index: 1;}
#page_goodr #g_enquate .result-graph li dl::after { content: ''; width: 0; height: 100%; border-radius: 3px; position: absolute; top: 0; left: 0; display: block; z-index: 1;}
#page_goodr #g_enquate .result-graph li.yellow dl::after { background: #fada18;}
#page_goodr #g_enquate .result-graph li.blue01 dl::after { background: #77e6de;}
#page_goodr #g_enquate .result-graph li.blue02 dl::after { background: #bbf2ee;}
#page_goodr #g_enquate .result-graph li.gray   dl::after { background: #d7e3e2;}
#page_goodr #g_enquate .result-graph li dt { font-weight: bold; color: #555; position: relative; z-index: 3;}
#page_goodr #g_enquate .result-graph li dd { font-weight: bold; color: #555; position: relative; z-index: 3;}
#page_goodr #g_enquate .color { margin: 0 3px; font-weight: bold; letter-spacing: -2px; text-shadow: 2px 0 0 #fada17, 0 1px 0 #fada17, -1px 0 0 #fada17, 0 -2px 0 #fada17; color: #21cbbf;}

/* PC */
@media only screen and (min-width: 768px) {
	#page_goodr #g_enquate { padding: 0 50px; background: url("../../img/usr/freepage/goodr/bg_goodr.jpg") top right no-repeat; -webkit-background-size: auto; background-size: auto;}
	#page_goodr #g_enquate h2 span::before { background: rgba(119,230,222,0.9);}
  #page_goodr #g_enquate .top-text { margin-bottom: 30px; font-size: 22px; text-align: center; line-height: 2.0;}
  #page_goodr #g_enquate .enquate-result-frame { display: flex; justify-content: space-between; flex-wrap: wrap;}
  #page_goodr #g_enquate .enquate-result-frame .frame { width: 48%; margin: 0 0 60px 0;}
  #page_goodr #g_enquate .result-title { height: calc(4.8em + 60px); padding: 20px 40px 40px; margin: 0 0 20px 0; font-size: 24px; line-height: 1.6; display: flex; align-items: center; background: url("../../img/usr/freepage/goodr/result_title_bg.png") top center no-repeat; -webkit-background-size: 100% 100%; background-size: 100% 100%;}
  #page_goodr #g_enquate .result-title .text { font-size: 24px; font-weight: bold; color: #555;}
  #page_goodr #g_enquate .result-title .kome { font-size: 20px; font-weight: bold; color: #555;}
  #page_goodr #g_enquate .result-graph li dl { height: 40px; line-height: 30px;}
  #page_goodr #g_enquate .result-graph li dt { height: 40px; padding: 0 0 0 25px; line-height: 40px; font-size: 20px;}
  #page_goodr #g_enquate .result-graph li dd { height: 40px; padding: 0 8px 0 0; line-height: 40px; font-size: 30px;}
  #page_goodr #g_enquate .result-graph li dd .color { font-size: 50px; position: relative; top: -10px;}
  #page_goodr #g_enquate .result-graph li dd .color .per { font-size: 20px;}
  #page_goodr #g_enquate #result_comment { padding: 165px 0 0 0; background: url(../../img/usr/freepage/goodr/enquate_text_top.png) center top no-repeat; -webkit-background-size: 230px auto; background-size: 230px auto;}
  #page_goodr #g_enquate #result_comment .line-bg { padding: 0 20px; font-size: 24px; font-weight: bold; letter-spacing: 2px; line-height: 54px; color: #555; background: url(enquate_text_line.png) center top repeat-y; -webkit-background-size: 100% 54px; background-size: 100% 54px;}
  #page_goodr #g_enquate #result_comment .line-bg strong { font-size: 30px; font-weight: bold; color: #21cbbf;}
  #page_goodr #g_enquate #result04 .result-graph li { padding: 0 0 0 50px;}
  #page_goodr #g_enquate #result04 .result-graph li.line01 { background: url(../../img/usr/freepage/goodr/enquate_best.png) left center no-repeat; -webkit-background-size: 40px  40px; background-size: 40px 40px;}
  #page_goodr #g_enquate #result04 .result-graph li.line02 { background: url(../../img/usr/freepage/goodr/enquate_better.png) left center no-repeat; -webkit-background-size: 40px  40px; background-size: 40px 40px;}
  #page_goodr #g_enquate #result04 .result-graph li.line03 { background: url(../../img/usr/freepage/goodr/enquate_poor.png) left center no-repeat; -webkit-background-size: 40px  40px; background-size: 40px 40px;}
  #page_goodr #g_enquate #result05 { position: relative;}
  #page_goodr #g_enquate #result05::after { content: ''; width: 289px; height: 323px; display: block; position: absolute; top: 0; left: -35px; background: url(../../img/usr/freepage/goodr/graph_arrow.png) center top no-repeat; z-index: 4;}
  #page_goodr #g_enquate .result-image { width: 410px; height: 410px; margin: 15px 0 0 56px; background: url(../../img/usr/freepage/goodr/graph_bg.png) center center no-repeat; -webkit-background-size: 100% 100%; background-size: 100% 100%;}
  #page_goodr #g_enquate .bottom-text-wrap { text-align: center;} 
  #page_goodr #g_enquate .bottom-text { margin: 0 auto; font-size: 26px; font-weight: bold; text-align: center; color: #555; position: relative; display: inline-block; z-index: 2;}
  #page_goodr #g_enquate .bottom-text::before { content: ''; width: 110%; height: 20px; display: block; position: absolute; bottom: -10px; left: -5%; background: rgba(250,218,24,0.8); transform: rotate(-2deg); z-index: -1;}
  #page_goodr #g_enquate .bottom-text .color { font-size: 50px;}
  #page_goodr #g_enquate .bottom-text .color .per { font-size: 30px;}
}
/* SP */
@media only screen and (max-width: 767px) {
	#page_goodr #g_enquate { padding: 0; background: url("../../img/usr/freepage/goodr/bg_goodr.jpg") top right no-repeat; -webkit-background-size: 60% auto; background-size: 60% auto;}
	#page_goodr #g_enquate h2 span::before { background: rgba(119,230,222,0.9);}
  #page_goodr #g_enquate .top-text { margin-bottom: 20px; font-size: 13px; text-align: center; line-height: 2.0;}
  #page_goodr #g_enquate .enquate-result-frame .frame { margin: 0 0 40px 0;}
  #page_goodr #g_enquate .result-title { height: calc(4.8em + 40px); padding: 5px 20px 25px; margin: 0 0 15px 0; font-size: 18px; line-height: 1.6; display: flex; align-items: center; background: url("../../img/usr/freepage/goodr/result_title_bg.png") top center no-repeat; -webkit-background-size: 100% 100%; background-size: 100% 100%;}
  #page_goodr #g_enquate .result-title .text { font-size: 18px; font-weight: bold; color: #555;}
  #page_goodr #g_enquate .result-title .kome { font-size: 14px; font-weight: bold; color: #555;}
  #page_goodr #g_enquate .result-graph li dl { height: 30px; line-height: 30px;}
  #page_goodr #g_enquate .result-graph li dt { height: 30px; padding: 0 0 0 15px; line-height: 30px; font-size: 15px;}
  #page_goodr #g_enquate .result-graph li dd { height: 30px; padding: 0 5px 0 0; line-height: 30px; font-size: 20px;}
  #page_goodr #g_enquate .result-graph li dd .color { font-size: 35px; position: relative; top: -4px;}
  #page_goodr #g_enquate .result-graph li dd .color .per { font-size: 14px;}
  #page_goodr #g_enquate #result_comment { padding-top: 110px; background: url(../../img/usr/freepage/goodr/enquate_text_top.png) center top no-repeat; -webkit-background-size: 150px auto; background-size: 150px auto;}
  #page_goodr #g_enquate #result_comment .line-bg { padding: 0 10px; font-size: 16px; font-weight: bold; letter-spacing: 2px; line-height: 34px; color: #555; background: url(../../img/usr/freepage/goodr/enquate_text_line.png) center top repeat-y; -webkit-background-size: 100% 34px; background-size: 100% 34px;}
  #page_goodr #g_enquate #result_comment .line-bg strong { font-size: 20px; font-weight: bold; color: #21cbbf;}
  #page_goodr #g_enquate #result04 { margin-bottom: 60px; position: relative; z-index: 4;}  
  #page_goodr #g_enquate #result04 .result-graph li { padding: 0 40px 0 40px;}
  #page_goodr #g_enquate #result04 .result-graph li.line01 { background: url(../../img/usr/freepage/goodr/enquate_best.png) left center no-repeat; -webkit-background-size: 30px 30px; background-size: 30px 30px;}
  #page_goodr #g_enquate #result04 .result-graph li.line02 { background: url(../../img/usr/freepage/goodr/enquate_better.png) left center no-repeat; -webkit-background-size: 30px 30px; background-size: 30px 30px;}
  #page_goodr #g_enquate #result04 .result-graph li.line03 { background: url(../../img/usr/freepage/goodr/enquate_poor.png) left center no-repeat; -webkit-background-size: 30px 30px; background-size: 30px 30px;}
  #page_goodr #g_enquate #result05 { position: relative;}
  #page_goodr #g_enquate #result05::after { content: ''; width: 75%; height: 50vh; min-height: 300px; display: block; position: absolute; top: -157px; right: 0; background: url(../../img/usr/freepage/goodr/graph_arrow_sp.png) center top no-repeat; -webkit-background-size: 100% auto; background-size: 100% auto; z-index: 2;}
  #page_goodr #g_enquate .result-image { max-width: 410px; margin: 0 auto; background: url(../../img/usr/freepage/goodr/graph_bg.png) center center no-repeat; -webkit-background-size: 100% 100%; background-size: 100% 100%;}
  #page_goodr #g_enquate .bottom-text .line01 { margin-bottom: 12px; text-align: center; display: block;}
  #page_goodr #g_enquate .bottom-text .line02 { text-align: center; display: block;}
  #page_goodr #g_enquate .bottom-text .line-inner { margin: 0 auto; font-size: 18px; font-weight: bold; text-align: center; color: #555; display: inline-block; position: relative; z-index: 2;}
  #page_goodr #g_enquate .bottom-text .line-inner::before { content: ''; width: 110%; height: 14px; display: block; position: absolute; bottom: -7px; left: -5%; background: rgba(250,218,24,0.8); transform: rotate(-2deg); z-index: -1;}
  #page_goodr #g_enquate .bottom-text .color { font-size: 35px;}
  #page_goodr #g_enquate .bottom-text .color .per { font-size: 20px;}
}

@keyframes graphLineBg {
    0% { width: 0;}
  100% { width: 100%;}
}
#page_goodr #g_enquate .result-graph li dl::before { width: 0;}
#page_goodr #g_enquate .result-graph.active li.line01 dl::before { animation: graphLineBg 0.5s ease-in 0.0s forwards;}
#page_goodr #g_enquate .result-graph.active li.line02 dl::before { animation: graphLineBg 0.5s ease-in 0.2s forwards;}
#page_goodr #g_enquate .result-graph.active li.line03 dl::before { animation: graphLineBg 0.5s ease-in 0.4s forwards;}
#page_goodr #g_enquate .result-graph.active li.line04 dl::before { animation: graphLineBg 0.5s ease-in 0.6s forwards;}
#page_goodr #g_enquate .result-graph.active li.line05 dl::before { animation: graphLineBg 0.5s ease-in 0.8s forwards;}
#page_goodr #g_enquate .result-graph.active li.line06 dl::before { animation: graphLineBg 0.5s ease-in 1.0s forwards;}
#page_goodr #g_enquate .result-graph.active li.line07 dl::before { animation: graphLineBg 0.5s ease-in 1.2s forwards;}
#page_goodr #g_enquate .result-graph.active li.line08 dl::before { animation: graphLineBg 0.5s ease-in 1.4s forwards;}

@keyframes per03 { 0% { width: 0;} 100% { width:  3%;} }
@keyframes per05 { 0% { width: 0;} 100% { width:  5%;} }
@keyframes per07 { 0% { width: 0;} 100% { width:  7%;} }
@keyframes per14 { 0% { width: 0;} 100% { width: 14%;} }
@keyframes per17 { 0% { width: 0;} 100% { width: 17%;} }
@keyframes per21 { 0% { width: 0;} 100% { width: 21%;} }
@keyframes per22 { 0% { width: 0;} 100% { width: 22%;} }
@keyframes per33 { 0% { width: 0;} 100% { width: 33%;} }
@keyframes per36 { 0% { width: 0;} 100% { width: 36%;} }
@keyframes per45 { 0% { width: 0;} 100% { width: 45%;} }
@keyframes per53 { 0% { width: 0;} 100% { width: 53%;} }
@keyframes per57 { 0% { width: 0;} 100% { width: 57%;} }
@keyframes per64 { 0% { width: 0;} 100% { width: 64%;} }
@keyframes per72 { 0% { width: 0;} 100% { width: 72%;} }
@keyframes per86 { 0% { width: 0;} 100% { width: 86%;} }
@keyframes per88 { 0% { width: 0;} 100% { width: 88%;} }
#page_goodr #g_enquate .result-graph li dl::after { width: 0;}
#page_goodr #g_enquate #result01 .result-graph.active li.line01 dl::after { animation: per64 0.5s ease-in 1.0s forwards;}
#page_goodr #g_enquate #result01 .result-graph.active li.line02 dl::after { animation: per21 0.5s ease-in 1.2s forwards;}
#page_goodr #g_enquate #result01 .result-graph.active li.line03 dl::after { animation: per17 0.5s ease-in 1.4s forwards;}
#page_goodr #g_enquate #result01 .result-graph.active li.line04 dl::after { animation: per14 0.5s ease-in 1.6s forwards;}
#page_goodr #g_enquate #result01 .result-graph.active li.line05 dl::after { animation: per05 0.5s ease-in 1.8s forwards;}
#page_goodr #g_enquate #result01 .result-graph.active li.line06 dl::after { animation: per03 0.5s ease-in 2.0s forwards;}
#page_goodr #g_enquate #result02 .result-graph.active li.line01 dl::after { animation: per57 0.5s ease-in 1.0s forwards;}
#page_goodr #g_enquate #result02 .result-graph.active li.line02 dl::after { animation: per53 0.5s ease-in 1.2s forwards;}
#page_goodr #g_enquate #result02 .result-graph.active li.line03 dl::after { animation: per36 0.5s ease-in 1.4s forwards;}
#page_goodr #g_enquate #result02 .result-graph.active li.line04 dl::after { animation: per17 0.5s ease-in 1.6s forwards;}
#page_goodr #g_enquate #result02 .result-graph.active li.line05 dl::after { animation: per07 0.5s ease-in 1.8s forwards;}
#page_goodr #g_enquate #result02 .result-graph.active li.line06 dl::after { animation: per05 0.5s ease-in 2.0s forwards;}
#page_goodr #g_enquate #result02 .result-graph.active li.line07 dl::after { animation: per21 0.5s ease-in 2.2s forwards;}
#page_goodr #g_enquate #result03 .result-graph.active li.line01 dl::after { animation: per88 0.5s ease-in 1.0s forwards;}
#page_goodr #g_enquate #result03 .result-graph.active li.line02 dl::after { animation: per86 0.5s ease-in 1.2s forwards;}
#page_goodr #g_enquate #result03 .result-graph.active li.line03 dl::after { animation: per57 0.5s ease-in 1.4s forwards;}
#page_goodr #g_enquate #result03 .result-graph.active li.line04 dl::after { animation: per45 0.5s ease-in 1.6s forwards;}
#page_goodr #g_enquate #result03 .result-graph.active li.line05 dl::after { animation: per33 0.5s ease-in 1.8s forwards;}
#page_goodr #g_enquate #result04 .result-graph.active li.line01 dl::after { animation: per72 0.5s ease-in 1.0s forwards;}
#page_goodr #g_enquate #result04 .result-graph.active li.line02 dl::after { animation: per22 0.5s ease-in 1.2s forwards;}
#page_goodr #g_enquate #result04 .result-graph.active li.line03 dl::after { animation: per05 0.5s ease-in 1.4s forwards;}

@keyframes graphDisc {
    0% { opacity: 0; transform: scale(0,0);}
  100% { opacity: 1.0; transform: scale(1,1);}
}
#page_goodr #g_enquate #result05 .result-image { opacity: 0;}
#page_goodr #g_enquate #result05 .result-image  img { opacity: 0;}
#page_goodr #g_enquate #result05::after { opacity: 0;}
#page_goodr #g_enquate #result05.active .result-image { animation: graphDisc 0.5s ease-in 1.0s forwards;}
#page_goodr #g_enquate #result05.active .result-image img { animation: graphDisc 1.0s ease-in 2.0s forwards;}
#page_goodr #g_enquate #result05.active::after { animation: graphDisc 1.0s ease-in 2.0s forwards;}