@charset "utf-8";
/*!
 * base CSS
 * ---------------------------------------------
 * 共通レイアウトに関わるCSS
 */

@import url(https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css);

/* html5 element
--------------------------------------------- */

article,aside,details,figcaption,figure,footer,header,menu,nav,section { 
    display:block;
}

/* margin, padding
--------------------------------------------- */

article,aside,details,figcaption,figure,footer,header,menu,nav,section,
* {
	margin: 0;
	padding: 0;
}

/* border
--------------------------------------------- */

fieldset,img {
	border: 0;
}

/* font
--------------------------------------------- */

*{
	font-size:100%;
}
body {
	font: 100%/1.6 "Rounded Mplus 1c",sans-serif;
    font-weight: bold;
}
h2,h3,h4,h5,h6,strong,b {
	font-weight: 700;
}

/* list
--------------------------------------------- */

ol,ul,li {
  list-style: none;
}

/* img
--------------------------------------------- */

img {
	display: block;
	max-width: 100%;
	height: auto;
}

.pc-hidden {
	display: none !important;
}
.brkSp {
	display: none;
}

input[type="button"],input[type="submit"] {
	-webkit-appearance: none;
}

/*===================================
	font
=====================================*/


body {
	color: #333;
}
.otherNavi h2 {
	color: #fff;
}
.otherNavi h2:hover {
	color: #103697;
}
body {
	font-size: 87.5%;/*14px*/
}
.copy,
.otherNavi h2 {
	font-size: 81.4%;/*10x*/
}
.copy {
	text-align: center;
}
.otherNavi h2 {
	text-align: right;
}


/*===================================
	link
=====================================*/

a,
a:visited {
	text-decoration: none;
}
a:hover,
a:focus,
a:active {
	text-decoration: underline;
}

/*===================================
	image
=====================================*/



/*===================================
	layout	
=====================================*/

.inner,
.wrapper,
.footerContents {
	width: 940px;
	margin-left: auto;
	margin-right: auto;
}
.home .wrapper {
	width: 941px;
}
.home #header {
	position: relative;
	z-index: 1000;
}
#header .inner {
	width: 960px;
	padding: 0;
}
#footer {
	padding-top: 30px;
}
.sub .wrapper {
	clear: both;
	margin-top: -90px;
}
.mainContent {
	float: right;
	width: 751px;
}
.sideNavi,
.subContent {
	float: left;
	width: 181px;
	padding-top: 102px;
}
.block {
	margin-bottom: 10px;
	padding: 14px 20px;
}
.block.hd {
	margin-bottom: 0;
}
.block.btm {
	margin-bottom: 20px;
}
.sub .block.hd {
	padding-bottom: 0;
}
.sub .block.btm {
	padding-top: 0;
}
.imgtxt {
	display: block;
}
.logo,
#footer,
.sub .wrapper,
.block {
	position: relative;
}

#header .inner,
#globalNavi ul,
.footerContents .inner,
.footerNavi ul,
.otherNavi ul,
.sub .wrapper,
.block {
	overflow: hidden;
	zoom: 1;
}

/*===================================
	background	
=====================================*/

html {
	background: #fff
}
body {
	background: url(../images/base/renewal/bg_smoke.png) repeat-x 50% 100%, url(../images/base/renewal/bg_bubble.jpg) repeat 50% 0;
}
/*.footerContents*//*.otherNavi h2 {
	background: url(../images/base/renewal/bg_ft.png) repeat-x 0 100%;
}*/
.block{
	background-color: #fff;
}
.product.single .block{
	background-color: #fff;
}

/*  sprite
---------------------------------*/

/*.otherNavi h2 span,
.imgtxt {
	background: url(../images/base/sprite.png) no-repeat;
}*/
#globalNavi li a,
.footerNavi li a,
.otherNavi li a,
.pagetop a:before,
.sideNavi h2,.sideNavi li a {
	background: url(../images/base/renewal/sprite_new.png) no-repeat;
}
.footerNavi li a:hover,
.pagetop a:hover {
	opacity: .5;
}
#globalNavi li a,
.footerNavi li a,
.otherNavi h2 span,.otherNavi li a,
.sideNavi li a,
.pagetop a,
.sub .block {
	display: block;
}
#globalNavi li a,
.footerNavi li a,
.otherNavi li a,
.sideNavi h2,.sideNavi li a,
.pagetop a {
	text-indent: -999em;
}

/*  角丸
---------------------------------*/

/*.block,*/
.pagetop a {
	border-radius: 10px;
}
.sideNavi li {
	border-radius: 17px;
}
.block.hd {
	border-radius: 9px 9px 0 0;
}
.block.btm {
	border-radius: 0 0 9px 9px;
}

/*===================================
	header	
=====================================*/

.logo {
	z-index: 400;
	float: left;
	padding-top: 16px;
}
.logo a {
	display: block;
	width: 212px;
}

/*===================================
	globalNavi
=====================================*/

#globalNavi {
	float: right;
	padding-top: 50px;
}
#globalNavi li {
	float: left;
	margin-left: 17px;
}
#globalNavi li a {
	width: 131px;
	height: 79px;
}
#globalNavi li.gn0 a {
	background-position: 0 0;
}
#globalNavi li.gn1 a {
	background-position: 0 -100px;
}
#globalNavi li.gn2 a {
	background-position: 0 -200px;
}
#globalNavi li.gn3 a {
	background-position: 0 -300px;
}
#globalNavi li.gn4 a {
	background-position: 0 -400px;
}
#globalNavi li.gn0 a:hover {
	background-position: -200px 0;
}
.product #globalNavi li.gn1 a,
#globalNavi li.gn1 a:hover {
	background-position: -200px -100px;
}
#globalNavi li.gn2 a:hover {
	background-position: -200px -200px;
}
.topics #globalNavi li.gn3 a,
#globalNavi li.gn3 a:hover {
	background-position: -200px -300px;
}
.faq #globalNavi li.gn4 a,
#globalNavi li.gn4 a:hover {
	background-position: -200px -400px;
}
.home #globalNavi li.gn0 {
	display: none;
}
.product #globalNavi li.gn1 a,
.topics #globalNavi li.gn3 a,
.faq #globalNavi li.gn4 a {
	pointer-events: none;
}

/*===================================
	footer	
=====================================*/

.footerNavi {
	width: 752px;
	margin: 0 auto;
}
.footerNavi li {
	float: left;
}
.footerNavi li a {
	height: 19px;
}
.footerNavi li.fn1 a {
	width: 62px;
	margin-right: 54px;
	background-position: -700px 0;
}
.footerNavi li.fn2 a {
	width: 99px;
	margin-right: 51px;
	background-position: -700px -50px;
}
.footerNavi li.fn3 a {
	width: 126px;
	margin-right: 38px;
	background-position: -700px  -100px;
}
.footerNavi li.fn4 a {
	width: 187px;
	margin-right: 33px;
	background-position: -700px  -150px;
}
.footerNavi li.fn5 a {
	width: 101px;
	background-position: -700px  -200px;
}
.copy {
	margin-top: 15px;
    margin-bottom: 30px;
}
.footLogo {
	clear: both;
	width: 91px;
	padding-top: 38px;
	margin: auto;
}
.footLogo img {
	position: relative;
	width: 91px;
	height: auto;
}
.otherNavi {
    display: none;
}
.otherNavi h2 {
	text-align: right;
	margin: -36px 0 36px;
	height: 27px;
	padding: 19px 10px 0 710px;
	cursor: pointer;
	line-height: 10px;
	border-radius: 10px;
}
.otherNavi p {/*add *20190802*/
	text-align: right;
	margin: -36px 0 36px;
	padding: 25px 10px 0 0;
	font-size:90%;
}

.otherNavi h2.open {
	border-radius: 0 0 10px 10px;
}
.otherNavi h2 span {
	height: 10px;
	padding-left: 20px;
}
.otherNavi h2 span {
	background-position: -977px 0;
}
.otherNavi h2:hover span {
	background-position: -977px -15px;
}
.otherNavi h2.open span {
	margin-left: 160px;
	background-position: -977px -71px;
}
.otherNavi h2.open:hover span {
	background-position: -977px -87px;
}
.otherNavi ul {
	position: absolute;
	bottom: 45px;
	bottom: 78px;
	width: 930px;
	height: 85px;
	margin: 0;
	padding: 0 0 0 10px;
	border-radius: 10px 10px 0 0;
	background: #6fbb5a;
	background: -webkit-gradient(linear, left top, left bottom, from(#6ebde6), color-stop(0.88, #6ebde6), to(#63add4));
	background: -webkit-linear-gradient(top, #6ebde6, #6ebde6 88%, #63add4);
	background: -moz-linear-gradient(top, #6ebde6, #6ebde6 88%, #63add4);
	background: -ms-linear-gradient(top, #6ebde6, #6ebde6 88%, #63add4);
	background: -o-linear-gradient(top, #6ebde6, #6ebde6 88%, #63add4);
	background: linear-gradient(top, #6ebde6, #6ebde6 88%, #63add4);
	-pie-background: linear-gradient(#6ebde6, #6ebde6 88%, #63add4);
	behavior: url(/resources/js/PIE.php);
}
.otherNavi li {
	float: left;
	margin: 34px 49px 0 0;
}
.otherNavi li.on1 {
	margin-right: 38px;
}
.otherNavi li.on2 {
	margin-right: 38px;
}
.otherNavi li.on3 {
	margin-right: 43px;
}
.otherNavi li.on5 {
	margin-right: 46px;
}
.otherNavi li.on6 {
	margin-right: 38px;
}
.otherNavi li.on7 {
	margin-right: 0;
}
.otherNavi li a {
	height: 15px;
}
.otherNavi li.on1 a {
	width: 102px;
	background-position: -700px -500px;
}
.otherNavi li.on2 a {
	width: 110px;
	height: 16px;
	background-position: -700px -550px;
}
.otherNavi li.on3 a {
	width: 78px;
	background-position: -700px -600px;
}
.otherNavi li.on4 a {
	width: 66px;
	background-position: -700px -650px;
}
.otherNavi li.on5 a {
	width: 80px;
	background-position: -700px -700px;
}
.otherNavi li.on6 a {
	width: 115px;
	background-position: -700px -750px;
}
.otherNavi li.on7 a {
	width: 116px;
	background-position: -700px -800px;
}
.otherNavi li a:hover {
	opacity: .5;
}

/*===================================
	subContent
=====================================*/

.product .sideNavi h2 {
	width: 153px;
	height: 23px;
	margin: 0 auto 10px;
	background-position: 0 -600px;
}
.sideNavi ul {
	padding-bottom: 137px;
	/* background: url(../images/base/bg_side_navi.png) no-repeat 0 100%;             20200302*/
}
.sideNavi li {
	margin-bottom: 10px;
}
.sideNavi li:last-child {
	margin-bottom: 0;
}
.sideNavi li a {
	width: 181px;
	height: 52px;
}
.product .sideNavi li.sn0 a {
	background-position: 0 -650px;
}
.product .sideNavi li.sn1 a {
	background-position: 0 -750px;
}
.product .sideNavi li.sn3 a {
	background-position: 0 -850px;
}
.product .sideNavi li.sn4 a {
	background-position: 0 -950px;
}
.product .sideNavi li.sn5 a {
	background-position: 0 -1050px;
}
.product .sideNavi li.sn6 a {
	background-position: 0 -1150px;
}

.product .sideNavi li.sn0.current a,
.product.all .sideNavi li.sn0 a,
.product .sideNavi li.sn0 a:hover {
	background-position: -200px -650px;
}
.product .sideNavi li.sn1.current a,
.product.cat1 .sideNavi li.sn1 a,
.product .sideNavi li.sn1 a:hover {
	background-position: -200px -750px;
}
.product .sideNavi li.sn3.current a,
.product.cat3 .sideNavi li.sn3 a,
.product .sideNavi li.sn3 a:hover {
	background-position: -200px -850px;
}
.product .sideNavi li.sn4.current a,
.product.cat4 .sideNavi li.sn4 a,
.product .sideNavi li.sn4 a:hover {
	background-position: -200px -950px;
}
.product .sideNavi li.sn5.current a,
.product.cat5 .sideNavi li.sn5 a,
.product .sideNavi li.sn5 a:hover {
	background-position: -200px -1050px;
}
.product .sideNavi li.sn6.current a,
.product.cat6 .sideNavi li.sn6 a,
.product .sideNavi li.sn6 a:hover {
	background-position: -200px -1150px;
}

.product .sideNavi li.current,
.product.all .sideNavi li.sn0 a,
.product.cat1 .sideNavi li.sn1 a,
.product.cat2 .sideNavi li.sn2 a,
.product.cat3 .sideNavi li.sn3 a,
.product.cat4 .sideNavi li.sn4 a,
.product.cat5 .sideNavi li.sn5 a {
	pointer-events: none;
}

/*===================================
	pagetop	
=====================================*/

.pagetop {
	clear: both;
	margin: 0 0 0px;
}
.pagetop a {
	position: relative;
	width: 751px;
	height: 38px;
	margin-left: 190px;
	background: #9ed8f5;
}
.pagetop a:before {
	content: "";
	display: block;
	position: absolute;
	top: 13px;
	left: 330px;
	width: 88px;
	height: 12px;
	background-position: -200px -500px;
}

.imgradius { /* 20210323add */
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

/************************************************************************************
smaller than 700
*************************************************************************************/
@media screen and (max-width: 640px) {
	
	html {
		-webkit-text-size-adjust: none;
	}
	
	/* スマートフォン用のパーツを表示 */

	.pc-hidden {
		display: block !important;
	}
	.sp-hidden {
		display: none !important;
	}
	.brkSp {
		display: block;
	}
	
	/*===================================
		font
	=====================================*/
	
	.copy,.footerNavi a,.footerNavi a:visited {
		color: #62451b;
	}
	.otherNavi li a,.otherNavi li a:visited{
		color: #e60012;
	}
	.otherNavi h2:hover {
		color: #fff;
	}
	body {
		font-size: 171.4%;/*24px*/
	}
	#globalNaviSp,
	.otherNavi {
		font-size: 116.6%;/*28px*/
	}
	.otherNavi h2 {
		font-size: 57%;/*28px→16px*/
	}
	.footerNavi {
		font-size: 75%;/*18px*/
	}
	.copy {
		font-size: 18px;
	}
	.android .copy {
		font-size: 14px;
	}
	.footerNavi,
	.copy {
		text-align: center;
	}
	
	/*===================================
		layout	
	=====================================*/
	
	#footer .inner,
	.wrapper,
	.home .wrapper {
		width: 616px;
		padding: 0;
	}
	.footerContents {
		width: auto;
	}
	.wrapper {
		position: relative;
		margin-left: auto;
		margin-right: auto;
		z-index: 1;
	}
	.sub .wrapper {
		margin-top: 0;
	}
	#header .inner {
		width: 640px;
		padding: 0;
	}
	.mainContent,
	.sideNavi {
		float: none;
		width: auto;
	}
	.sideNavi {
		padding-top: 0;
	}
	#header {
		z-index: 1000;
	}
	.sub #footer {
		padding-top: 68px;
	}
	.block {
		margin-bottom: 12px;
		padding: 16px;
	}
	.block.hd {
		margin-bottom: 12px;
	}	
	#globalNaviSp h2 span {
		display: block;
		text-indent: -999em;
	}
	
	/*===================================
		background	
	=====================================*/
	
	body {
		background-image: url(../images/base/renewal/bg_smoke_sp.png), url(../images/base/renewal/bg_bubble_sp.jpg);
	}
	/*.footerContents {　edit 20190802
		background: url(../images/base/renewal/bg_ft_sp.png) repeat-x 0 100%;
	}*/
	.wrapper {
		background: none;
	}
	
	/*  sprite
	---------------------------------*/
	
	.otherNavi li {
		background: url(../images/base/sprite.png) no-repeat;
	}
	#globalNaviSp h2 span,#globalNaviSp li a {
		background: url(../images/base/renewal/sprite_new.png) no-repeat;
	}
	
	/*  角丸
	---------------------------------*/
	
	#globalNaviSp h2 {
		border-radius: 10px;
	}
	#globalNaviSp h2 span {
		border-radius: 5px;
	}
	.otherNavi li {
		border-radius: 18px;
	}
	
	.block,.block.hd,.block.btm,
	.topics.single .block2.btm {
		border-radius: 10px;
	}
	
	/*===================================
		header	
	=====================================*/
	
	#header .inner {
		position: relative;
		overflow: visible;
		min-height: 260px;
	}
	.logo {
		float: none;
		width: 238px;
		margin: auto;
		padding-top: 12px;
	}
	.logo a {
		width: 238px;
		margin: auto;
	}
	.logo img {
		display: block;
		margin: 0 auto 0;
	}
	
	/*===================================
		globalNavi
	=====================================*/
	
	#globalNaviSp {
		line-height: 1;
	}
	#globalNaviSp h2 {
		position: absolute;
		z-index: 500;
		top: 32px;
		left: 32px;
		padding: 5px;
		background: #fff;
	}
	#globalNaviSp h2 span {
		width: 57px;
		height: 57px;
		background-color: #ed6d34;
		background-position: 0 -500px;
		cursor: pointer;
	}
	#globalNaviSp  h2.open span {
		background-position: -100px -500px;
	}
	#globalNaviSp ul {
		position: relative;
		width: 640px;
		height: 396px;
		margin-top: -11px;
		z-index: 300;
	}
	#globalNaviSp li {
		position: absolute;
	}
	#globalNaviSp li.gn0 {
		top: 0;
		left: 54px;
	}
	#globalNaviSp li.gn1 {
		top: 20px;
		left: 343px;
	}
	#globalNaviSp li.gn2 {
		top: 140px;
		left: 32px;
	}
	#globalNaviSp li.gn3 {
		top: 160px;
		left: 383px;
	}
	#globalNaviSp li.gn4 {
		top: 247px;
		left: 195px;
	}
	#globalNaviSp li a {
		display: block;
		width: 234px;
		height: 140px;
		text-indent: -9999em;
	}
	#globalNaviSp li.gn0 a {
		background-position: -400px 0;
	}
	#globalNaviSp li.gn1 a {
		background-position: -400px -200px;
	}
	#globalNaviSp li.gn2 a {
		background-position: -400px -400px;
	}
	#globalNaviSp li.gn3 a {
		background-position: -400px -600px;
	}
	#globalNaviSp li.gn4 a {
		background-position: -400px -800px;
	}
	
	/*===================================
		footer	
	=====================================*/
	
	.footerContents {
		padding: 0 0 30px;
	}
	.footerContents .inner {
		overflow: inherit;
	}
	.footerNavi {
		width: auto;
		margin: 0 auto -20px;
	}
	.footerNavi li {
		margin: 0 0 36px;
	}
	.footerNavi li a {
		height: 22px;
	}
	.footerNavi li.fn1 a {
		width: 54px;
		margin: 0 36px 0 216px; 
		background-position: -700px -250px;
	}
	.footerNavi li.fn2 a {
		width: 111px;
		margin-right: 198px;
		background-position: -700px -300px;
	}
	.footerNavi li.fn3 a {
		width: 149px;
		margin: 0 29px 0 26px; 
		background-position: -700px -350px;
	}
	.footerNavi li.fn4 a {
		width: 237px;
		margin-right: 29px;
		background-position: -700px -400px;
	}
	.footerNavi li.fn5 a {
		width: 112px;
		background-position: -700px -450px;
	}
	.copy {
		float: none;
		width: auto;
		line-height: 1;
		margin-bottom: 60px;
		color: #62451b;
	}
	.footLogo {/*edit 20190802*/
        margin: 96px auto 30px;
		width: 146px;
        padding-top: 0;
        text-align: center;
	}
	.footLogo img {
		width: auto;
		padding: 0;
                text-align: center;
	}
    .otherNavi p {/*add *20190802*/
        text-align: center;
        font-size:60%;
    }
	.otherNavi h2 {
		margin: -30px 0 0 270px;
		line-height: 18px;
		height: auto;
		padding: 0;
		border-radius: 0;
	}
	.otherNavi h2.open {
		border-radius: 0;
	}
	.otherNavi h2 span {
		height: 18px;
		padding-left: 23px;
	}
	.otherNavi h2 span {
		background-position: -977px -31px;
	}
	.otherNavi h2:hover span {
		background-position: -977px -31px;
	}
	.otherNavi h2.open span {
		margin-left: 250px;
		background-position: -977px -107px;
	}
	.otherNavi h2.open:hover span {
		background-position: -977px -107px;
	}
	.otherNavi {
		position: relative;
	}
	.otherNavi ul {
		overflow: inherit;
		width: auto;
		height: auto;
		margin: 0;
		padding: 0;
		border-radius: 0;
		background: none;
		-pie-background: none;
	}
	.otherNavi li,
	.otherNavi li.on1,
	.otherNavi li.on2,
	.otherNavi li.on3,
	.otherNavi li.on5,
	.otherNavi li.on6,
	.otherNavi li.on7 {
		float: none;
		margin-top: 0;
		margin-right: 0;
	}
	.otherNavi li a {
		display: inline;
		height: auto;
		background: none;
		text-indent: 0;
	}
	.otherNavi li.on1 a,.otherNavi li.on2 a,.otherNavi li.on3 a,.otherNavi li.on4 a,.otherNavi li.on5 a,.otherNavi li.on6 a,.otherNavi li.on7 a {
		width: auto;
		background-position: inherit;
	}
	.otherNavi li a:hover {
		opacity: 1;
	}
	.otherNavi ul {
		bottom: 60px;
		width: 616px;
		margin: 0 -12px;
		padding: 20px 12px 15px;
		background: #6fbee6;
		z-index: 1000;
	}
	.otherNavi li {
		margin-bottom: 12px;
		padding-left: 48px;
		background-color: #fff;
		background-position: 560px -23px;
		line-height: 76px;
		font-weight: 700;
	}
	
	/*===================================
		pagetop	
	=====================================*/
	
	.pagetop {
		margin: 36px auto 25px;
	}
	.pagetop a {
		width: 616px;
		height: 22px;
		margin: 0;
		background-color: transparent;
	}
	.pagetop a:before {
		top: 0;
		left: 222px;
		margin: 0;
		width: 152px;
		height: 22px;
		background-position: -200px -550px;
	}
	
}