@charset "utf-8";


/*=======================================================
	グーン おむつの歩み
=======================================================*/

/* ------- cmn ------- */
.flatbase {
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
}
main {
	color: #000;
	background: url(../img/bg.png);
}
.flatbase li,
.flatbase p{
	line-height: 1.6;
}


/* ------- header ------- */
#history_header {
	padding: 16px 0;
	border-bottom: 2px solid #06c;
	background: url(../img/header_bg.png) no-repeat 0 0 #fff;
	text-align: center;
	font-size: 1.6rem;
}
#history_header h1 {
	margin-bottom: 8px;
}
#history_header p{
	font-size: 1.6rem;
}

/* ------- main ------- */
#history_main {
	border-bottom: 2px solid #06c;
}

#history_main ul li {
	position: relative;
}

#history_main .history_year {
	padding: 10px 23px 10px 15px;
	background: url(../img/year_bg.png) no-repeat -146px 0;
	position: absolute;
	top: 0;
	width: 108px;
}

#history_main h2 {
	font-size: 2.0rem;
	line-height: 26px;
	color: #039;
}

#history_main h2 span {
	font-size: 1.2rem;
	vertical-align: super;
}

#history_main h2 + div {
	padding-top: 15px;
}

.commentary {
	padding: 35px 0 0;
	font-size: 1.25rem;
	box-sizing: border-box;
	text-align: center;
}


/* ------- goon以前 ------- */
#history_before_goon {
	padding: 0 25px;
	background: #fff;
}

#history_before_goon li {
	margin-top: -40px;
	padding: 12px 0 70px;
	background: url(../img/odd_bg.png) no-repeat 50% 100%;
}

#history_before_goon h2 {
	padding: 5px 5px 5px 160px;
	background: #fff;
	display: inline;
}

#history_before_goon li > div {
	padding-left: 160px;
}

#history_before_goon li > div > * {
	display: inline-block;
	vertical-align: top;
}

#history_before_goon li > div img {
	padding-right: 23px;
}

/* 右寄せの年 */
#history_before_goon #y1986,
#history_before_goon #y1994,
#history_before_goon #y2001 {
	background: url(../img/even_bg.png) no-repeat 50% 100%;
	text-align: right;
}

#history_before_goon #y1986 .history_year,
#history_before_goon #y1994 .history_year,
#history_before_goon #y2001 .history_year {
	padding: 10px 15px 10px 23px;
	background: url(../img/year_bg.png) no-repeat 0 0;
	right: 0;
}

#history_before_goon #y1986 h2,
#history_before_goon #y1994 h2,
#history_before_goon #y2001 h2 {
	padding: 5px 160px 5px 5px;
}

#history_before_goon #y1986 > div,
#history_before_goon #y1994 > div,
#history_before_goon #y2001 > div {
	padding-left: 0;
	padding-right: 160px;
}

#history_before_goon #y1986 > div img,
#history_before_goon #y1994 > div img,
#history_before_goon #y2001 > div img {
	padding: 0 0 0 23px;
}

#history_before_goon #y1986 > div p,
#history_before_goon #y1994 > div p,
#history_before_goon #y2001 > div p {
	text-align: center;
}

/* 個別の設定 */
#history_before_goon #y1980 {
	margin-top: 0;
	padding-top: 52px;
	background: url(../img/1980_bg.png) no-repeat 50% 0;
}

#history_before_goon #y1980 .history_year {
	top: 40px;
}


#y1980 .history_note {
	padding-left: 160px;
	color: #039;
	font-size: 12px;
	font-size: 1.2rem;
}

#y1982 .commentary {
	padding-top: 51px;
	background: url(../img/1982_txt_bg.png) no-repeat 0 0;
	width: 313px;
	height: 155px;
}

#y1986 .commentary {
	background: url(../img/1986_txt_bg.png) no-repeat 0 0;
	width: 290px;
	height: 148px;
}

#y1988 .commentary {
	padding-top: 55px;
	background: url(../img/1988_txt_bg.png) no-repeat 0 0;
	width: 261px;
	height: 155px;
}


#y1994 .history_year {
	background: url(../img/y1994_bg.png) no-repeat 0 0 !important;
	width: 220px !important;
}

#y1994 h2 {
	padding: 5px 272px 5px 5px !important;
}


#y1994 .commentary {
	padding-top: 50px;
	padding-right: 10px;
	background: url(../img/1994_txt_bg.png) no-repeat 0 0;
	width: 312px;
	height: 178px;
}

#y1995 .commentary {
	padding-top: 34px;
	background: url(../img/1995_txt_bg.png) no-repeat 0 0;
	width: 382px;
	height: 213px;
}


#y2001 .commentary {
	padding-top: 50px;
	background: url(../img/2001_txt_bg.png) no-repeat 0 0;
	width: 403px;
	height: 180px;
}

#y1986:after,
#y1995:after,
#y2001:after {
	content: "";
	position: absolute;
}

#y1986:after {
	left: 100px;
	bottom: 50px;
	width: 112px;
	height: 89px;
	background: url(../img/1986_bg.png) no-repeat;
}

#y1995:after {
	right: 6px;
	top: 43px;
	width: 160px;
	height: 198px;
	background: url(../img/1995_bg.png) no-repeat;
}

#y2001:after {
	left: 155px;
	top: 120px;
	width: 69px;
	height: 85px;
	background: url(../img/2001_bg.png) no-repeat;
}

/* ------- goon以降 ------- */
#history_goon {
	margin-top: -40px;
	padding: 0 10px 0 160px;
	background: url(../img/goon_bg.png) repeat-y 0 0 ;
}

#history_goon li {
	padding-bottom: 25px;
	text-align: center;
}

#history_goon .history_year {
	left: -135px;
}

#history_goon h2 {
	margin: 0 30px 20px;
	padding: 12px 0 5px;
	border-bottom: 3px solid #039;
	font-weight: normal;
	color: #000;
}

#history_goon div img {
	margin-bottom: 20px;
}

#history_goon li.history_logo {
	background: #fff;
}

#history_goon p {
	margin: 0 auto;
}

#history_goon .history_logo .history_year {
	padding: 10px 807px 10px 23px;
	background: url(../img/logo_title_bg.png) no-repeat 0 0;
	position: absolute;
	top: 0;
	left: -144px;
	z-index: 0;
}

#history_goon .history_logo h2 {
	margin: 0;
	padding: 0 0 20px;
	line-height: 50px;
	position: relative;
	z-index: 10;
	color: #fff;
	border-bottom: 0;
	font-weight: bold;
}

.type_wrap {
	display: table;
	width: 100%;
}

.type_wrap > div {
	display: table-cell;
	width: 395px;
	vertical-align: top;
}

.history_tape {
	padding-right: 10px;
}

.type_wrap h3 {
	padding-bottom: 5px;
	background: #fff;
	font-weight: normal;
}

#history_goon .history_logo .commentary {
	padding-top: 50px;
	background: url(../img/logo_txt_bg.png) no-repeat 0 0;
	width: 520px;
	height: 156px;
}

#history_goon .history_note {
	padding: 10px 40px 0 0;
	text-align: right;
	font-size: 12px;
	font-size: 1.2rem;
}

/* 個別の設定 */
#y2002 .history_pants img {
	margin-top: 50px;
}
#y2004 .history_tape img {
	margin-top: 40px;
}
#y2004 h2 {
	padding-top: 0;
}
#y2002 .commentary,
#y2004 .commentary,
#y2015 .commentary,
#y2016 .commentary,
#y2017 .commentary{
	margin: 0 auto 0;
	background: url(../img/goon_txt_bg_wide.png) no-repeat 0 0;
	width: 712px;
	height: 130px;
}
#y2002 .commentary,
#y2004 .commentary,
#y2015 .commentary{
	padding-top: 45px;
}
#y2016 .commentary{
	padding-top: 36px;
}
#y2017 .commentary{
	padding-top: 35px;
}
#y2015 .history_tape img {
	margin-top: 26px;
}
#y2016 .history_tape img {
	margin-top: 29px;
}
#y2017 .history_tape img {
	margin-top: 29px;
}

#y2005 > div,
#y2012 > div {
	text-align: left;
}
#y2005 > div img,
#y2012 > div img {
	padding-left: 23px;
	display: inline-block;
	vertical-align: top;
}
#y2005 .commentary,
#y2012 .commentary {
	margin-left: 71px;
	display: inline-block;
	vertical-align: top;
}
#y2005 .commentary {
	margin-left: 71px;
	padding-top: 45px;
	padding-right: 20px;
	background: url(../img/2005_txt_bg.png) no-repeat 0 0;
	width: 416px;
	height: 179px;
}

#y2012 > div img {
	margin-top: -20px;
}
#y2012 .commentary {
	margin-left: 71px;
	padding-top: 45px;
	padding-right: 20px;
	background: url(../img/2012_txt_bg.png) no-repeat 0 0;
	width: 464px;
	height: 185px;
}

#y2009 h2 {
	padding-top: 0;
}
#y2009 .history_tape img {
	margin-top: 31px;
}
#y2009 .commentary{
	padding-top: 55px;
	padding-left: 10px;
	background: url(../img/goon_txt_bg_narrow.png) no-repeat 0 0;
	width: 385px;
	height: 207px;
}
#history_goon li#y2019 {
	padding-top: 20px;
	padding-bottom: 40px;
	background-color: #fff;
}
#history_goon li#y2019 .history_year{
	top: 22px;
}
#y2019 .history_tape{
	background-color: #fff;
}
.type_wrap_night{
	margin: 30px 0 10px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}
#history_goon .type_wrap_night img{
	margin-bottom: 0;
}
.history_item_wrap{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
#y2019 .commentary{
	margin: -30px 0 0 3px;
	padding: 0 0 0 21px;
	background: url(../img/goon_txt_bg_narrow2.png) no-repeat center center;
	width: 340px;
	height: 220px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.commentary_item1{
	margin-top: -40px;
	width: 140px;
}
.commentary_item2{
	margin: 57px 0 0 -25px;
	width: 140px;
}
#y2019 .commentary .type_name span{
	margin-bottom: 5px;
	padding: 0 10px;
	display: inline-block;
	font-size: 1.3rem;
	border-bottom: 1px solid #efc3c3;
}


/* message */
#history_message {
	padding: 30px 0;
	background: #fff;
	text-align: center;
	line-height: 2;
}
#history_message img {
	padding-top: 30px;
}

/* goo-n_point_nav */
.goo-n_point_ttl{
	margin: 0 0 5px;
}

/* --- 下部 関連リンク バナー配置 --- */
.banner_cont{
	margin: 0;
	padding: 20px 0 0;
	background-color: #fff;
  text-align: center;
}
.banner_list{
	text-align: center;
	display: block;
}
.banner_list li{
	margin: 0;
	display: block;
}
.banner_list li a,
.banner_cont_banner{
	display: inline-block;
	box-sizing: border-box;
	border: 2px solid #fff;
}
.banner_list li img{
	width: 500px;
	-webkit-backface-visibility: hidden;
}
.banner_list a:hover{
	opacity: 0.8;
}




/* ===========================================
	MediaQueries
=========================================== */

/* スマホ ----------------------------- */
@media screen and (max-width: 767px) {

/* ------- cmn ------- */
	.flatbase {
		margin-bottom: 0;
		padding: 4px 0 0;
	}

	main{
		background: url(../img/goon_bg.png) repeat-y -10px 0;
		background-size: 66px auto;
	}

	main img{
		max-width: 100% !important;
		height: auto !important;
	}

/* ------- header ------- */
	#history_header {
		padding: 36px 10px 26px;
		background-size: contain;
	}

/* ------- main ------- */
	#history_main {
		padding-top: 20px;
	}

	#history_main ul {
		padding: 0 10px !important;
		background: transparent !important;
	}

	#history_main ul li {
		margin-top: 0 !important;
		padding: 40px 0 40px 50px !important;
		background: transparent !important;
		text-align: center;
	}

	#history_main .history_year {
		padding: 7px 18px 7px 10px !important;
		width: auto !important;
		height: 20px !important;
		background-size: auto 34px !important;
		background-position: -100px 0;
		left: 0 !important;
	}
	#history_main .history_year img {
		width: auto;
		height: 20px !important;
		display: block;
	}

	#history_main h2 {
		padding: 0 !important;
		background: transparent !important;
		font-size: 1.7rem;
	}

	#history_main li > div {
		padding: 0 !important;
		display: flex;
		flex-direction: column;
	}

	#history_main li > div img {
		padding: 0 !important;
		max-height: 150px;
		width: auto;
	}

	.commentary {
		margin: 0 !important;
		padding: 0 !important;
		width: 100% !important;
		height: auto !important;
		text-align: left !important;
	}

	#history_before_goon .commentary {
		background: url(../img/txt_bg_sp1.png) repeat 0 0 !important;
		background-size: 16px 16px !important;
		border-image: url(../img/txt_border_sp1.png) 40 round;
		border-style: solid;
		border-width: 30px;
	}

	#history_goon .commentary {
		background: url(../img/txt_bg_sp2.png) repeat 0 0 !important;
		background-size: 16px 16px !important;
		border-image: url(../img/txt_border_sp2.png) 40 round;
		border-style: solid;
		border-width: 30px;
	}

	#history_goon .history_logo .commentary {
		background: url(../img/txt_bg_sp3.png) repeat 0 0 !important;
		background-size: 16px 16px !important;
	}

/* ------- goon以前 ------- */
	#history_before_goon li > div > * {
		margin: 10px auto !important;
		display: block;
	}

/* 右寄せの年 */
	#history_before_goon #y1986,
	#history_before_goon #y1994,
	#history_before_goon #y2001 {
		text-align: center;
	}

	#history_before_goon #y1986 .history_year,
	#history_before_goon #y1994 .history_year,
	#history_before_goon #y2001 .history_year {
		background-position: -100px 0;
		right: auto;
	}


/* 個別の設定 */
	#history_before_goon #y1980 .history_year {
		top: 0;
	}

	#y1980 .history_note {
		text-align: right;
	}

	#y1986 div p,
	#y1994 div p {
		order: 2;
	}
	#y1986 div img,
	#y1994 div img {
		order: 1;
	}

	#y1994 .history_year {
		background: url(../img/y1994_sp_bg.png) no-repeat 0 0 !important;
		background-size: auto 34px !important;
	}

	#y1986:after,
	#y1995:after,
	#y2001:after {
		display: none;
	}

/* ------- goon以降 ------- */
	#history_goon {
		padding: 0;
		margin-top: 0;
		background: transparent;
	}

	#history_goon h2 {
		margin: 0 0 10px;
		border-bottom: 2px solid #9eaece;
	}

	#history_goon .history_logo {
		padding-bottom: 0 !important;
	}

	#history_goon .history_logo .history_year {
			background: url(../img/year_logo_bg.png) no-repeat 0 0;
	}

	#history_goon .history_logo h2 {
		margin: 0 0 10px;
		line-height: 26px;
		color: #c00;
	}

	#history_goon .history_logo img {
		margin-bottom: 10px;
	}

	.type_wrap > div {
		display: block;
		width: auto;
		vertical-align: top;
	}

	.history_tape {
		padding-right: 0;
	}

	.type_wrap h3 {
		display: none;
	}

	#history_goon .history_note {
		padding: 10px 0 0 0;
		text-align: left;
	}

/* 個別の設定 */
	#y2002 .history_pants img,
	#y2004 .history_tape img,
	#y2015 .history_tape img,
	#y2016 .history_tape img,
	#y2009 .history_tape img,
	#y2017 .history_tape img {
		margin-top: 0;
	}

	#y2005 > div,
	#y2012 > div {
		align-items: center;
	}
	#y2005 > div img,
	#y2012 > div img {
		order: 1;
	}
	#y2005 .commentary,
	#y2012 .commentary {
		display: block;
		order: 2;
	}
	#y2012 > div img {
		margin-top: 0;
	}

	#y2009 .history_tape {
		margin-bottom: 20px;
	}

	#y2015 .type_wrap,
	#y2016 .type_wrap,
	#y2017 .type_wrap{
		flex-flow: row wrap;
		justify-content: space-around;
	}

	#history_goon li#y2019 .history_year{
		top: 0;
	}
	#history_goon .type_wrap_night img{
	margin-bottom: 20px;
}
	#y2019 .commentary .type_name{
		text-align: center;
	}
	#y2019 .commentary .type_name span{
		background-color: #fad5d5;
		width: 100%;
		box-sizing: border-box;
		border-radius: 10px;
		border: none;
	}
	#y2019 .commentary{
		display: block;
	}
	.commentary_item1,
	.commentary_item2{
		margin: 0;
		width: 100%;
	}
	.commentary_item1{
		margin-bottom: 15px;
	}

/* message */
	#history_message {
		padding: 30px 0 30px 50px;
		background: transparent;
		text-align: center;
		line-height: 2;
	}

	/* goo-n_point_nav */
	.banner_cont{
		padding: 20px 10px 0;
	}
	.goo-n_point_ttl{
		margin-bottom: 5px;
	}
	.goo-n_point_ttl img{
		width: 150px;
	}

}