@charset "utf-8";

/*------------------------------------------
 *	Media Query
------------------------------------------*/

@media only screen and (max-width: 768px) {
	/*------------------------------------------
	 *	html, body
	------------------------------------------*/
	body {
		display: block;
		min-width: inherit;
		font-size: 14px;
	}
	a:hover {
		text-decoration: underline;
	}
	.is-block-sp {
		display: block;
	}
	.is-block-pc {
		display: none;
	}
	a {
		outline: none;
		-webkit-touch-callout:none;
		-webkit-tap-highlight-color:rgba(0,0,0,0);
	}

	/*------------------------------------------
	 *	Layout
	------------------------------------------*/
	.sec-in {
		width: 100%;
	}

	/*------------------------------------------
	 *	Ico
	------------------------------------------*/
	.ico-member {
		display: block;
		width: 60px;
		height: 51px;
		background: url(../img/ico_member.png) center center no-repeat;
		background-size: 60px 51px;
		position: static;
	}

	/*------------------------------------------
	 *	Header
	------------------------------------------*/
	#header {
		width: 100%;
		height: 54px;
		padding: 0 16px;
	}
	#header .logo-coop img{
		width: 90px;
		height: 27px;
		margin-top: 0;
	}

	/*------------------------------------------
	 *	Footer
	------------------------------------------*/
	#footer {
		width: 100%;
		margin: 0 auto;
		padding: 0 0 65px;
		box-sizing: border-box;
		background: #ffffff;
		border-top: 1px solid #dcdcdc;
	}
	#footer .inner {
		width: 100%;
		padding: 0;
	}
	#footer .info {
		border-top: none;
		padding: 0;
	}
	#footer .links {
		float: none;
		width: 100%;
		margin: 0;
		padding: 2.5% 0;
		list-style-type: none;
		border-bottom: 1px solid #dcdcdc;
		text-align: center;
		font-size: 0;
	}
	#footer .links > li {
	  float: none;
	  display: inline-block;
	  vertical-align: top;
	  font-size: 10px;
	}
	#footer .links > li + li {
	  margin-left: 5em;
	}
	#footer .links a {
	  padding-left: 6px;
	  background: url(../img/icn_link.png) left center no-repeat;
	  background-size: 3px 5.5px;
	}
	#footer .copyright {
	  float: none;
	  margin: 0;
	  padding-top: 3.5%;
	  text-align: center;
	  font-size: 11px;
	  font-size: 2.45vw;
	  line-height: 1.5;
	}
	#footer .copyright small {
	  display: block;
	  padding-top: 0.7em;
	  font-size: 11px;
	}
	#footer .joint {
	  display: block;
	  overflow: hidden;
	  margin: 0;
	  text-align: center;
	  font-size: 0;
	  padding: 1.6835% 4.0625% 2.8125% 3.125%;
	}
	#footer .joint .txt {
	  display: block;
	  margin-bottom: 10px;
	  font-size: 11px;
	  font-size: 2.45vw;
	}
	#footer .joint span.txt.is-block-sp {
	  margin-right: 3.7037%;
	  vertical-align: 0;
	  width: 67.12121%;
	  display: block;
	  margin: 0 auto 0;
	}
	#footer .joint .logoUcoop {
		max-width: 172px;
		width: 22.39%;
		margin: 0 auto;
	}


	/*------------------------------------------
	 *	Page
	------------------------------------------*/
	
	/* mainView 
	----------------------------------*/
	.mainView {
	}
	.mainView .inner {
		max-width: inherit;
	}
	
	
	/* navP 
	----------------------------------*/
	.navP {
	}
	.navP .inner {
		max-width: inherit;
		width: 100%;
		margin: 0 auto;
	}
	.navP ul li {
		border-left: 2px solid #ffffff;
		box-sizing: border-box;
	}
	.navP ul li:first-child {
		border-left: none;
	}
	.navP ul li:last-child {
		border-right: none;
	}
	.navP ul li a {
		position: relative;
		display: block;
		padding: 10px 0 23px;
		font-size: 14px;
		line-height: 1.4;
	}
	.navP ul li a:hover:after {
		margin: 0 auto 9px;
	}
	
	
	
	
	
	/* app 
	----------------------------------*/
	.app {
		padding-top: 20px;
	}
	.app .inner {
		max-width: inherit;
		width: 92%;
	}
	.app .store {
		margin-bottom: 15px;
		padding-bottom: 15px;
	}
	.app .store .applestore,
	.app .store .googleplaystore {
		width: 50%;
		padding-bottom: 10px;
	}
	.app .store .applestore figure {
		display: none;
	}
	.app .store .googleplaystore figure {
		display: none;
	}
	.app .store .applestore .txt {
		padding-left: 20%;
	}
	.app .store .googleplaystore .txt {
		padding-left: 0px;
		text-align: center;
	}
	.app .store .applestore .txt p:nth-of-type(1) {
		padding-bottom: 5px;
		padding-left: 5%;
		font-size: 12px;
		font-size: 3.0vw;
		font-weight: 500;
	}
	.app .store .googleplaystore .txt p:nth-of-type(1) {
		padding-bottom: 5px;
		font-size: 12px;
		font-size: 3.0vw;
		font-weight: 500;
	}
	.app .store .applestore .txt p:nth-of-type(2) {
		max-width: 218px;
		width: 77.82%;
	}
	.app .store .googleplaystore .txt p:nth-of-type(2) {
		max-width: 267px;
		width: 76.286%;
		text-align: center;
		padding-left: 5%;
	}
	.app .store .note {
		width: 100%;
	}
	.app .store .note ul {
		padding-left: 0;
	}
	.app .store .note ul li {
		font-size: 12px;
		font-size: 3.05vw;
	}
	.app .membership p {
		padding-bottom: 15px;
		font-size: 14px;
		font-size: 3.1vw;
		line-height: 1.4;
		text-align: left;
		text-indent: -1em;
		padding-left: 1em;
	}
	.app .membership ul {
		display: block;
	}
	.app .membership ul li {
		width: 100%;
		font-size: 14px;
	}
	.app .membership ul li:nth-of-type(1) {
		text-align: center;
		margin-right: 0;
		margin-bottom: 20px;
	}
	.app .membership ul li:nth-of-type(2) {
		text-align: center;
		margin-left: 0;
	}
	.app .membership ul li a {
		font-size: 14px;
		font-size: 3.26vw;
		text-decoration: none;
	}
	
	
	
	/* detailBlock 
	----------------------------------*/
	.detailBlock {
		position: relative;
		width: 100%;
	}
	.detailBlock .inner {
		max-width: inherit;
		width: 92%;
		padding: 10% 0 20px;
	}
	.detailBlock #otoku {
		margin-top: -40px;
		padding-top: 40px;
	}
	.detailBlock #benri {
		margin-top: -40px;
		padding-top: 40px;
	}
	.detailBlock .otoku {
		margin-bottom: 50px;
	}
	.detailBlock .benri {
		margin-bottom: 40px;
	}
	.detailBlock .otoku,
	.detailBlock .benri {
		position: relative;
		border-radius: 10px;
		background: url(../img/bg_pattern.png) repeat center top;
		background-size: 40px 40px;
	}
	.detailBlock .otoku .ttl {
		position: absolute;
		top: 0;
		max-width: inherit;
		width: 100%;
		margin: -5% auto 0;
	}
	
	.detailBlock .benri .ttl {
		position: absolute;
		top: 0;
		max-width: inherit;
		width: 100%;
		margin: -5% auto 0;
	}
	.detailBlock .otoku .notes,
	.detailBlock .benri .notes {
		margin-top: 14px;
		margin-left: 5px;
		font-size: 14px;
		font-size: 3.3vw;
		line-height: 1.5;
	}
	.detailBlock ul {
		padding: 0 4%;
		padding-top: 15%;
	}
	.detailBlock ul li {
		margin-bottom: 30px;
		max-width: 628px;
		width: 100%;
    flex: 1 1 auto;
	}
	.detailBlock ul li .otoku02link {
		text-align: center;
	}
	.detailBlock ul li .otoku02link a {
		display: inline-block;
		margin-top: 20px;
		padding-bottom: 7px;
		font-size: 4.1vw;
		font-weight: 500;
		text-decoration: none;
		border-bottom: 1px solid #acaba5;
	}
	.detailBlock .youtubeBtn {
		margin-bottom: 40px;
	}
	.fadein {
		transform: translateY(60px);
		opacity: 0;
	}
	.fadein.scrollin {
		opacity: 1;
		transform: translateY(0);
		transition: 1.5s;
	}
	.detailBlock .contactBtn {
		max-width: inherit;
		width: 88%;
	}
	.detailBlock .contactBtn .off {
		display: block;
	}
	.detailBlock .contactBtn .on {
		display: none;
	}
	.detailBlock .contactBtn:hover .off{
		display: block;
	}
	.detailBlock .contactBtn:hover .on {
		display: none;
	}
	
	
	
	/* detailBlock 
	---------------------------------------------------------------------*/
	.notesBlock {
		padding: 20px 0;
		width: 100%;
	}
	.notesBlock .inner {
		width: 92%;
	}
	.notesBlock ul li {
		font-size: 14px;
		font-size: 3.36vw;
		line-height: 1.5;
		text-indent: -1.3em;
		padding-left: 1.3em;
	}
	
	
	
	/*.floating .is-block-sp 
	---------------------------------------------------------------------*/
	.floating {
		position: fixed;
		min-width: inherit;
		bottom: 0;
		left: 0;
		width: 100%;
		height: auto;
		margin-top: 30px;
		display: flex;
		display: -webkit-flex;
		display: -ms-flex;
		background: #ff653d;
		padding: 7px 0;
	}
	.floating .inner {
		max-width: inherit;
	}
	.floating .is-block-sp {
		width: 96%;
		margin: 0 auto;
		display: flex;
		display: -webkit-flex;
		display: -ms-flex;
	}
	.floating .is-block-sp p {
		max-width: 252px;
		width: 32.8125%;
		width: 26%;
		margin-right: 2%;
		margin-top: -15px;
	}
	.floating .is-block-sp ul {
		max-width: 463px;
		width: 72%;
		display: flex;
		display: -webkit-flex;
		display: -ms-flex;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		background: #ffffff;
		border-radius: 5px;
		padding: 5px 0;
	}
	.floating .is-block-sp ul li:nth-of-type(1) {
		max-width: 173px;
		width: 37.365%;
		margin: 0 3% 0 2.5%;
	}
	.floating .is-block-sp ul li:nth-of-type(2) {
		max-width: 250px;
		width: 53.996%;
		margin: 1% 2% 0 0; 
	}
}