@charset "UTF-8";
/* メニューページCSS */
/* -----------------------------------------------*/
.sp{
display:none;
}

#point {width:95%;margin:0 auto 50px;}
#point .fontsize_s{
font-size:70%;
}

.reflection {
line-height:150%;
display:inline-block;
font-size:140%;
width:23%;
background-color: #4671c0;
border:5px solid #9cc9eb;
color:#FFFFFF;
padding: 15px 0 25px;
}
.reflection img {
width:40% !important;
}
/*
.reflection::after {
content: "";
display: block;
width: 23%;
height: 100%;
position: absolute;
top: -180px;
left: 0;
background-color: #FFF;
opacity: 0;
transform: rotate(45deg);
animation: reflect 2s ease-in-out infinite;
-webkit-transform: rotate(45deg);
-webkit-animation: reflect 2s ease-in-out infinite;
}
@keyframes reflect {
  0% { transform: scale(0) rotate(45deg); opacity: 0; }
  80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { transform: scale(4) rotate(45deg); opacity: 1; }
  100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes reflect {
  0% { transform: scale(0) rotate(45deg); opacity: 0; }
  80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { transform: scale(4) rotate(45deg); opacity: 1; }
  100% { transform: scale(50) rotate(45deg); opacity: 0; }
}

.keyframe0{
clear:both;
padding:30px 0;
    animation-name: anim_v;
}

@keyframes anim_v {
    0% {
        transform: translate(0, 0px);
    }
    100% {
        transform: translate(0, -15px);
    }
}*/
article .ionConte .text{
display:inline-block;
font-size:170%;
line-height:120%;
color:#4671c0;
background:linear-gradient(transparent 60%, #9cc9eb 60%);
margin-bottom:30px;
}

article .ionConte{
width:70%;
margin:70px auto 50px;
background:#FFFFFF;
padding:50px;
clear:both;
}
article .ionConte img{
width:100%;
height:auto;
}
article .ionConte p{
margin:20px auto;
line-height:200%;
}
.seventy {
width:70%;
text-align: left;
}
.bigger {
font-size:110%;
line-height:2.2em !important;
text-align: center;
}
article .ionConte hr {
border: #669ace solid 1px;
width: 70%;
}
article .ionConte h5{
font-size:180%;
color:#669ace;
padding:50px 0 20px 0;
}



article .ionConte .ionPlace{
margin: 50px auto 30px;
border: 5px solid #9cc9eb;
padding: 50px 0;
width: 90%;
}

article .ionConte .ionPlace dl{
width:40%;
display:inline-block;
vertical-align:middle;
text-align:left;
}
article .ionConte .ionPlace dt{
font-size:150%;
color:#669ace;
margin-bottom:20px;
padding-bottom:10px;
border-bottom:3px dotted #669ace;
}
article .ionConte .ionPlace dd li{
color:#669ace;
font-size:110%;
margin:10px 0;
padding-left:30px;
background:url(../images/top/ionear_check.png) no-repeat left;
background-size:5%;

}
article .ionConte .ionPlace img{
width:45%;
display:inline-block;
vertical-align:middle;
margin-left:30px;
}

#numbers {
width: 70%;
margin: 0 auto;}

.two-column-left,.two-column-right {
float:left;
text-align: left;
}
.two-column-left {
width:38%;
margin-right:2%;
}
.two-column-right {
width:60%;
margin-top:20px;
}

article .ionConte .experiment{
color:#669ace;
}
article .ionConte .experiment li{
width:30%;
display:inline-block;
vertical-align:top;
line-height:250%;
padding:5px;
border:1px solid #669ace;
border-radius: 10px;		/* CSS3草案 */
	-webkit-border-radius: 10px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 10px;	/* Firefox用 */
}
article .ionConte .experiment li .fontsize_b{
font-size:250%;
color:#528de5;
}


article .ionConte .price{
overflow:hidden;
width: 90%;
 margin: 20px auto;
}
article .ionConte .price dt{
width:40%;
height:auto;
float:left;
}
article .ionConte .price dd{
width:58%;
float:right;
}
article .ionConte table{
width:100%;
color:#669ace;
}

article .ionConte table td,article .ionConte table th{
text-align:center;
padding:20px 0;
border:2px solid #669ace;
}
article .ionConte table td {
font-size: 115%;
font-weight: bolder;
}

article .ionConte .whatrumitester .left{
width:26%;
height:auto;
display:inline-block;
vertical-align:middle;
margin-right:30px;
}
article .ionConte .whatrumitester .right{
width:55%;
display:inline-block;
vertical-align:middle;
text-align: left;
}
article .ionConte .whatrumitester .right h6{
font-size:140%;
font-weight:bolder;
}
article .ionConte .whatrumitester .right p{
font-size:100%;
}
article .ionConte .whatrumitester .right .fontsize_s{
font-size:90%;

}


article .ionConte .ionTest{
margin: 50px auto 30px;
border: 5px solid #9cc9eb;
padding: 0 0 50px;
width: 90%;}

article .ionConte .ionTest h6{
font-size:150%;
color:#0066CC;
padding:50px 0 10px 0;
}

article .ionConte .ionTest dl{
width:30%;
display:inline-block;
vertical-align:top;

}

article .ionConte .workslist dl{
width:30%;
display:inline-block;
vertical-align:top;
margin-bottom:20px;
}
article .ionConte .workslist dl img{
width:100%;
height:auto;
}
article .ionConte .workslist dd{
font-size:90%;
}
article .ionConte .workslist dd img{
width:8%;
height:auto;
vertical-align:middle;
}



article .ionConte .works{
width:100%;
margin:0 auto;
}
article .ionConte .works dl{
position:relative;
margin-top:30px;
}

article .ionConte .works dl dt{
text-align:left;
font-size:120%;
padding:10px 0;
}


article .ionConte .works ul{
column-count: 2;
column-gap: 0;
margin:0;
}


article .ionConte .works ul li{
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;	
}

article .ionConte .works .ball{
width:15%;
position:absolute;
right:-30px;
bottom:-50px;
}

article .ionConte .works .case4 .taxi img{
width:40%;
height:auto;
position:absolute;
right:20px;
bottom:20px;
}
article .ionConte .works .case4 .kirakira{
width:8%;
height:auto;
position:absolute;
right:0;
bottom:100px;
}





/*アニメーション*/


.animation{
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 0.5s;
}
.keyframe5{
    animation-name: anim_sc;
    transform: scale(0.85,0.85);
}

@keyframes anim_sc {
    100% {
        transform: scale(1,1);
        
    }
}



.poyooon {
      -webkit-animation: poyooon 0.9s linear 0s 1;
      animation: poyooon 0.9s linear 0s 1;
	      animation-iteration-count: infinite;
    }
    @-webkit-keyframes poyooon {
      0%   { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
      10%  { -webkit-transform: scale(1.1, 0.9) translate(0%, 5%); }
      40%  { -webkit-transform: scale(1.2, 0.8) translate(0%, 15%); }
      50%  { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
      60%  { -webkit-transform: scale(0.9, 1.2) translate(0%, -100%); }
      75%  { -webkit-transform: scale(0.9, 1.2) translate(0%, -20%); }
      85%  { -webkit-transform: scale(1.2, 0.8) translate(0%, 15%); }
      100% { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
    }
    @keyframes poyooon {
      0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
      10%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
      40%  { transform: scale(1.2, 0.8) translate(0%, 15%); }
      50%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
      60%  { transform: scale(0.9, 1.2) translate(0%, -100%); }
      75%  { transform: scale(0.9, 1.2) translate(0%, -20%); }
      85%  { transform: scale(1.2, 0.8) translate(0%, 15%); }
      100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
    }


article .contactBtn a{
background:#669ace;
}
.movie{
width:48%;
display:inline-block;
}

/*.movie {
  width: 48%;
  height: 0;
  position: relative;
  padding-top: 56.25%;
  overflow: hidden;
}

.movie iframe {
  position: absolute;
  top: 0;
  left: 5%;
  width: 90% !important;
  height: 90% !important;
}

*/




/*タブレット*/
@media screen and (max-width: 820px) {
.sp{
display:block;
}
.pc{
display:none;
}
.seventy, #numbers {
width:90%;}
#point {
width:90%;}
	
.bigger{
font-size:105%;
}
.reflection {
width: 23%;
font-size: 100%;
}

article .ionConte .text{
display:inline-block;
font-size:150%;
line-height:150%;
margin-bottom:0;
}


article .ionConte{
width:90%;
margin:0 auto 50px;
background:#FFFFFF;
clear:both;
padding: 40px 20px;
}
	
article .ionConte .ionPlace dl, article .ionConte .ionPlace img {
width:90%;
display:block;
margin:20px auto;
}
article .ionConte .ionPlace dd li{
background-size: 3%;
}
	
.two-column-left, .two-column-right {
width:100%;
float:none;
margin:0 auto 10px;}	
	

article .ionConte .price dt{
width:100%;
height:auto;
float:none;
}
article .ionConte .price dd{
width:100%;
float:none;
}
article .ionConte table{
margin-top:10px;
}

.whatrumitester {
width:90%;
margin:0 auto;
}
	
article .ionConte .whatrumitester .left{
width: 35%;
}
article .ionConte .whatrumitester .right {
width:59%;
	}
	
article .ionConte .whatrumitester .right h6{
font-size:150%;
color:#0066CC;
padding:30px 0 10px 0;
}
article .ionConte .whatrumitester .right p{
font-size:100%;
}
article .ionConte .whatrumitester .right .fontsize_s{
font-size:90%;

}

.movie{
width:100%;
margin-bottom:10px;
}


.movie iframe {
  left: 0%;
  width: 100% !important;
  height: 100% !important;
}

article .ionConte .workslist dl{
width:48%;
margin-bottom:20px;
}
article .ionConte .workslist dd{
font-size:90%;
}
article .ionConte .workslist dd img{
width:15%;
}



article .ionConte .works{
width:100%;
margin:0 auto;
}


article .ionConte .works ul{
column-count:1;
column-gap: 0;
margin:0;
}


article .ionConte .works ul li{
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;	
}

article .ionConte .works .ball{
width:25%;
position:absolute;
right:0px;
bottom:-20px;
}

article .ionConte .works .case4 .taxi img{
width:50%;
height:auto;
position:absolute;
left:5px;
bottom:0px;
}
article .ionConte .works .case4 .kirakira{
width:15%;
height:auto;
position:absolute;
left:0px;
bottom:80px;
}



}



/*スマホ*/
@media screen and (max-width: 640px) {
#point {width:100%;}
.reflection {
width:46%;margin-bottom: 5px;}
.bigger {font-size:100%;}
	
article .ionConte .ionPlace {
width:95%;
padding:30px 0;
}
.seventy,article .ionConte .price,.whatrumitester,article .ionConte .ionTest {
width:95%;margin:0 auto;}
article .ionConte .experiment li{
width:90%;
padding:5px;
margin-bottom:10px;
}
	
article .ionConte .whatrumitester .left{
width:50%;
height:auto;
}
article .ionConte .whatrumitester .right{
width:100%;
display:inline-block;
vertical-align:middle;
}
	

}