/* =========================================================
PCメイン
========================================================= */


@media screen and (min-width: 981px) {

/*--------------------------------------
base
---------------------------------------*/
img {
	width: 100%;
}

#container {
    width: 100%;
    position: relative;
    font-family: 'Noto Sans Japanese',"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    padding-bottom: 0px;
    background: url(../img/bg.png);
}
.clearfix:after {
  content: '';
  display: table;
  clear: both;
}

/*--------------------------------------
top
---------------------------------------*/
#top {
	position: relative;
	width: 100%;
	margin: 0 auto 2%;
    overflow: hidden;
}

.top_content {
    position: relative;
	margin: 0 auto;
	text-align:center;
}

#bell {
    position: absolute;
	top: 4%;
	right:8%;
}

/*----- ナビゲーション -----*/
#navi {
    position: relative;
    top: 10px;
    box-sizing: border-box;
	width: 100%;
    padding: 4% 22%;
    font-size: 0;
    z-index: 999;
    text-align: center;
    margin: 0 auto;
}

#navi ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 00px;
}

#navi li {
    display: inline-block;
    width: 21%;
	padding: 0 2%;
}

#navi ul li:last-child {
    margin-right: 0;
}


/*--------------------------------------
content
---------------------------------------*/
.content {
    width:100%;
    margin: 0 auto;
    padding-bottom: 100px;
	clear:both;
	
}

h3.title {
    background: url(../img/ttl_bg.png) repeat-x;
    margin:0 auto 0;
	width:100%;
	height:119px;
	text-align:center;
	padding-top:15px;	
}

h3.title2 {
    margin:0 auto 0;
	width:100%;
	text-align:center;
	padding-top:15px;	
}
	
.content .title img{
	height:90px;
	width: auto;
}

.content .title2 img{
	height:150px;
	width: auto;
}

.bg_stripe_yellow {
    width: 100%;
    background: url(../img/bg_stripe_yellow.png) ;
	padding-bottom: 9%;
}	
.bg_stripe_pb {
    width: 100%;
    background: url(../img/bg_stripe_pb3.png);
	padding-bottom: 48%;
}		
.bg_stripe {
	width: 100%;
    background: url(../img/bg_stripe.png);
	padding-bottom: 48%;
}
.bg_stripe_orange {
    width: 100%;
    background: url(../img/bg_stripe_orange.png);
	padding-bottom: 48%;
	
}
.bg_stripe_pink {
    width: 100%;
    background: url(../img/bg_stripe_pink.png);
	padding-bottom: 48%;
}
.bg_stripe_green {
    width: 100%;
    background: url(../img/bg_stripe_green.png);
	padding-bottom: 48%;
}

.contentInner {
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    padding: 0 auto 5%;
    margin: 2% 0 0;
}


/* base アイテム */
a:hover img {
  opacity: 0.8;
}

.item .img {
    display: block;
    margin: 0 auto 10px;
}


/* アイテム1列 */
.box1 {
    width: 100%;
    margin: 0 auto;
	text-align:center;
}

.box1 .item {
    margin: 0 auto;
    width: 980px;
	position: relative;
	padding-top:20px;
}

.box1 .pickup_right {
   position: absolute;
    top: 0;
    right: 0%;
    width: 110px;
    height: 180px;
    background: url(../img/icon_pickup.png) no-repeat;
}

.box1 .pickup_left {
   position: absolute;
    top: 0;
    left: 37%;
    width: 110px;
    height: 180px;
    background: url(../img/icon_pickup.png) no-repeat;
}

.box1 .hdimg {
    margin-top: -30px;
}

.box1 .hdimg_mt {
    margin-top: 50px;
}

box1 .icon {
    position: absolute;
}

/* アイテム2列 */
	
.box2 {
    width: 980px;
    margin: 0 auto;
}	

.rankitem{
width: 980px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
padding: 2% 0;
	}	

.rankitem li{
width: 45%;
padding-bottom: 2%;	
	}	
	
/* アイテム3列 */
.box3 {
    width: 980px;
    margin: 0 auto;
}

.box3 .item {
    position: relative;
	float: left;
    box-sizing: border-box;
    width: 31%;
    margin: 5% 2% 5% 0;
}

.txt {
    text-align: center;
	font-size: 25px;
	margin-top: 20px;
}


/* 振り子
-------------------------------*/
.swing {
    -webkit-animation: swing linear 3s infinite;
    -webkit-transform-origin: center -30px 0;
    animation: swing linear 3s infinite;
    transform-origin: center -30px 0;
    display: block;
}

@keyframes swing {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

/*--------------------------------------
TOPへ戻る
---------------------------------------*/
#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

.top_icon {
	position: relative;
	display: inline-block;
	font-size: 0px;
	width: 75px;
	height: 75px;
	-webkit-border-radius: 50%; /* Google Chrome、Safari */
	border-radius: 50%;
	text-align: center;
	z-index: 1;
	color: #D03A24;
	text-decoration: none;
}

.top_icon:after {
	position: absolute;
	content: '';
	pointer-events: none;
	width: 100%;
	height: 100%;
	-webkit-border-radius: 50%; /* Google Chrome、Safari */
	border-radius: 50%;
	-webkit-box-sizing: content-box; 
	box-sizing: content-box;
}

.top_icon:before {
	display: block;
	font-family: 'FontAwesome';
    content: "\f062";
    padding-top: 10%;
    font-size: 45px;
    font-size: 3rem;
	-webkit-font-smoothing: antialiased;
	line-height: 1.3;
}

/* effect */
.effect .top_icon {
	box-shadow: 0 0 0 4px #D03A24;
	-webkit-transition: color 0.3s;
	transition: color 0.3s;
}

.effect .top_icon:after {
	top: -2px;
	left: -2px;
	padding: 2px;
	z-index: -1;
	background: #D03A24;
	-webkit-transition: -webkit-transform 0.2s, opacity 0.3s;
	transition: transform 0.2s, opacity 0.3s;
}

/* effect a */
.effect-a .top_icon {
	color: #fff;
}

.effect-a .top_icon:hover {
	color: #D03A24 !important;
}

.effect-a .top_icon:hover:after {
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
	opacity: 0;
}

}


/* =========================================================
スマホ＆タブレット
========================================================= */

@media screen and (max-width: 980px) {

/*--------------------------------------
base
---------------------------------------*/
img {
	width: 100%;
}

#container {
    width: 100%;
    position: relative;
    font-family: 'Noto Sans Japanese',"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    padding-bottom: 0;
    background: url(../img/bg.png);
	/*background-size: 100%;*/
}
.clearfix:after {
  content: '';
  display: table;
  clear: both;
}

/*--------------------------------------
top
---------------------------------------*/
#top {
	position: relative;
	width: 100%;
	margin: 0 auto 2%;
    overflow: hidden;
}

.top_content {
    position: relative;
	margin: 0 auto;
	text-align:center;
}

#bell {
    position: absolute;
	top: 4%;
	right:8%;
	width: 20%;
}

/*----- ナビゲーション -----*/
#navi {
    position: relative;
    top: 10px;
    box-sizing: border-box;
	width: 100%;
    padding: 4% 2%;
    font-size: 0;
    z-index: 999;
    text-align: center;
    margin: 0 auto;
}

#navi ul {
    display: block;
    width: 100%;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 00px;
}

#navi li {
    display: inline-block;
    width: 21%;
	padding: 0 2%;
}

#navi ul li:last-child {
    margin-right: 0;
}


/*--------------------------------------
content
---------------------------------------*/


h3.title {
    background: url(../img/ttl_bg.png) repeat-x;
    margin:0 auto 30px;
	width:100%;
	height:100px;
	text-align:center;
	padding:2% 0;
	box-sizing: border-box;
	display: flex;
}

h3.title2 {
    margin:0 auto 0;
	width:100%;
	text-align:center;
	padding:2% 0;
	box-sizing: border-box;
	display: flex;
}
	
.content .title img{
	margin:auto;
	width:50%;
}

.content .title2 img{
	margin:auto;
	width:50%;
}
	
.bg_stripe_yellow {
    width: 100%;
    background: url(../img/bg_stripe_yellow.png) ;
	padding-bottom: 9%;
}	
.bg_stripe_pb {
    width: 100%;
    background: url(../img/bg_stripe_pb3.png);
	padding-bottom: 58%;
}		
.bg_stripe {
	width: 100%;
    background: url(../img/bg_stripe.png);
	padding-bottom: 58%;
}
.bg_stripe_orange {
    width: 100%;
    background: url(../img/bg_stripe_orange.png);
	padding-bottom: 85%;
	
}
.bg_stripe_pink {
    width: 100%;
    background: url(../img/bg_stripe_pink.png);
	padding-bottom: 85%;
}
.bg_stripe_green {
    width: 100%;
    background: url(../img/bg_stripe_green.png);
	padding-bottom: 90%;
}

.contentInner {
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    padding: 0 auto 5%;
    margin: 2% 0 0;
}


/* base アイテム */
a:hover img {
  opacity: 0.8;
}

.item .img {
    display: block;
    margin: 0 auto 10px;
}


/* アイテム1列 */
.box1 {
    max-width: 100%;
    margin: 0 auto;
	text-align:center;
}

.box1 .item {
    margin: 0 auto;
    max-width: 100%;
	position: relative;
	padding:20px 2%;
}

.box1 .pickup_right {
   position: absolute;
    top: 0;
    right: 5%;
    width: 60px;
    height: 91px;
    background: url(../img/icon_pickup_sp.png) no-repeat;
}

.box1 .pickup_left {
   position: absolute;
    top: 0;
    left: 40%;
    width: 60px;
    height: 91px;
    background: url(../img/icon_pickup_sp.png) no-repeat;
}

.box1 .hdimg {
    margin-top: -30px;
}

.box1 .hdimg_mt {
    margin-top: 50px;
}

box1 .icon {
    position: absolute;
}

/* アイテム2列 */
	
.box2 {
    width: 100%;
    margin: 0 auto;
	padding: 0;
}	

.rankitem{
width: 100%;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
padding: 0;
	}	

.rankitem li{
width: 45%;
padding-bottom: 2%;	
	}	
	
/* アイテム3列 */
.box3 {
    width: 100%;
    margin: 0 auto;
}

.box3 .item {
    position: relative;
	float: left;
    box-sizing: border-box;
    width: 30.7%;
    margin: 5% 0 5% 2%;
}

.txt {
    text-align: center;
	font-size: 20px;
}


/* 振り子
-------------------------------*/
.swing {
    -webkit-animation: swing linear 3s infinite;
    -webkit-transform-origin: center -30px 0;
    animation: swing linear 3s infinite;
    transform-origin: center -30px 0;
    display: block;
}

@keyframes swing {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}


/*--------------------------------------
TOPへ戻る
---------------------------------------*/
#page-top {
    position: fixed;
    top: 93%;
    right: 5%;
}

.top_icon {
	position: relative;
	display: inline-block;
	font-size: 0px;
	width: 85px;
	height: 85px;
	-webkit-border-radius: 50%; /* Google Chrome、Safari */
	border-radius: 50%;
	text-align: center;
	z-index: 1;
	color: #D03A24;
	text-decoration: none;
}

.top_icon:after {
	position: absolute;
	content: '';
	pointer-events: none;
	width: 100%;
	height: 100%;
	-webkit-border-radius: 50%; /* Google Chrome、Safari */
	border-radius: 50%;
	-webkit-box-sizing: content-box; 
	box-sizing: content-box;
}

.top_icon:before {
	display: block;
	font-family: 'FontAwesome';
    content: "\f062";
    padding-top: 10%;
    font-size: 45px;
    font-size: 3rem;
	-webkit-font-smoothing: antialiased;
	line-height: 1.3;
}

/* effect */
.effect .top_icon {
	box-shadow: 0 0 0 4px #D03A24;
	-webkit-transition: color 0.3s;
	transition: color 0.3s;
}

.effect .top_icon:after {
	top: -2px;
	left: -2px;
	padding: 2px;
	z-index: -1;
	background: #D03A24;
	-webkit-transition: -webkit-transform 0.2s, opacity 0.3s;
	transition: transform 0.2s, opacity 0.3s;
}

/* effect a */
.effect-a .top_icon {
	color: #fff;
}

.effect-a .top_icon:hover {
	color: #D03A24 !important;
}

.effect-a .top_icon:hover:after {
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
	opacity: 0;
}



}