@import url("color.css");

@font-face
{
font-family: ロゴたいぷゴシック;
src: url('https://cdn.leafscape.be/logotype/logotype_web.woff')
     format("woff");
}

body{
font-family:"Julius Sans One","メイリオ", sans-serif;
font-size:14px;
letter-spacing:1px;
line-height:150%;
color:#333;
background:#fff;
margin:0;
padding:0;}

@media screen and (min-width: 601px){
.wrp{
max-width:800px;
margin:0 auto;}

.act{overflow:hidden;}

.title{
text-align:center;
float:left;
width:20%;}

.sub{
width:70%;
float:right;
padding:5px 0  5px 25px;
margin-left:15px;
border-left:solid 2px #0342ab;}

.act:nth-child(2n) .sub{
width:70%;
float:right;
padding:5px 0  5px 25px;
margin-left:15px;
border-left:solid 2px #94abcc;}
}

@media screen and (max-width: 600px){
.wrp{
width:100%;
margin:0 auto;}

.title{
text-align:center;
padding-bottom:10px;
margin-bottom:15px;
border-bottom:solid 2px #0342ab;}


.act:nth-child(2n) .title{
text-align:center;
padding-bottom:10px;
margin-bottom:15px;
border-bottom:solid 2px #94abcc;}
}

.sq{
width:151px;
height:151px;
margin:60px auto 20px;
background-color: #94abcc;
background-image: linear-gradient(135deg, #0342ab 0%, #bfccdc 100%);

-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
overflow:hidden;
border:solid 3px #fff;
box-shadow:0 0 0 5px #94abcc;
}

.top{
position:absolute;
width:200px;
height:200px;
color:#fff;
background:transparent;
-webkit-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
transform:rotate(-45deg);
text-align:center;
}

.top a{
margin:1px;
padding:0 1px;
text-align:center;
display:inline-block;
width:50px;
color:#fff;
background:#333;
border:solid 1px #333;}

.top a:hover{
background:#eaf4fc;
color:#333;}

.act{
text-align:left;
margin:30px 25px 20px;
padding:15px;
background:#fff;
border:double 7px #94abcc;
box-shadow:0 0 0 1px #94abcc;}

.act:nth-child(2n){
margin:30px 23px 20px;
box-shadow:0 0 0 1px #0342ab;
border:double 7px #0342ab;
background:#fff;}

.bk{  background-size: 50px 50px; /* radial-gradientが適用されるサイズ */
  /* 下記のグラデーションの色は透明度を調整、重なる部分が色が濃くなる */
  background-image: radial-gradient(closest-side, rgba(25,68,142,0.4) 98%, rgba(25,68,142,0.3) 100%),
                    radial-gradient(circle at top left, rgba(25,68,142,0.13) 35%, rgba(255, 255, 255, 0) 35% 100%),
                    radial-gradient(circle at top right, rgba(25,68,142,0.13) 35%, rgba(255, 255, 255, 0) 35% 100%),
                    radial-gradient(circle at bottom left, rgba(25,68,142,0.13) 35%, rgba(255, 255, 255, 0) 35% 100%),
                    radial-gradient(circle at bottom right, rgba(25,68,142,0.13) 35%, rgba(255, 255, 255, 0) 35% 100%);
  background-repeat: repeat;
padding:10px;}

.icn{
width:31px;
height:31px;
margin:30px auto 20px;
background:#eaf4fc;
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
overflow:hidden;
border:solid 2px #fff;
box-shadow:0 0 0 3px #eaf4fc;
}

.text{
font-size:13px;
line-height:200%;
margin:30px 20px;}

.text p{
margin:20px 10px;
padding:10px;
font-size:11px;
line-height:150%;
background: -moz-linear-gradient(right top, #fff, #fff 25%, #efefef 25%, #efefef 50%,#fff 50%, #fff 75%,#efefef 75%,#efefef);
background: -webkit-linear-gradient(right top, #fff, #fff 25%, #efefef 25%, #efefef 50%,#fff 50%, #fff 75%,#efefef 75%,#efefef);
background: linear-gradient(right top, #fff, #fff 25%, #efefef 25%, #efefef 50%,#fff 50%, #fff 75%, #efefef 75%,#efefef);
-moz-background-size: 20px 20px;
-webkit-background-size: 20px 20px;
background-size: 20px 20px;}

header{  background-size: 50px 50px; /* radial-gradientが適用されるサイズ */
  /* 下記のグラデーションの色は透明度を調整、重なる部分が色が濃くなる */
  background-image: radial-gradient(closest-side, rgba(25,68,142,0.4) 98%, rgba(25,68,142,0.3) 100%),
                    radial-gradient(circle at top left, rgba(25,68,142,0.13) 35%, rgba(255, 255, 255, 0) 35% 100%),
                    radial-gradient(circle at top right, rgba(25,68,142,0.13) 35%, rgba(255, 255, 255, 0) 35% 100%),
                    radial-gradient(circle at bottom left, rgba(25,68,142,0.13) 35%, rgba(255, 255, 255, 0) 35% 100%),
                    radial-gradient(circle at bottom right, rgba(25,68,142,0.13) 35%, rgba(255, 255, 255, 0) 35% 100%);
  background-repeat: repeat;
margin-bottom:60px;}

.ft{
text-align:center;
margin:10px;
font-size:12px;
line-height:150%;}

.ft a{
margin:1px;
padding:0 1px;
text-align:center;
display:inline-block;
width:50px;
color:#fff;
background:#333;
border:solid 1px #333;}

.ft a:hover{
background:#eaf4fc;
color:#333;}

hr {
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.list-image a, .list-image span {
display: inline-block;
vertical-align: middle;
text-align: center;
}

.list-image > * {
margin: 0 3px 11px 0;
padding: 5px 3px 0 5px;
}

.list-image > *:nth-child(6n) {
margin-right: 0;
}
.list-image a:hover {
opacity: 1;
}

.pair {
display: inline-block; 
vertical-align: middle;
text-align: center;
width: 270px;
height: 130px;
padding: 5px 0;
margin: auto 10px;
}

h1{
font-family:ロゴたいぷゴシック,sans-serif;
font-weight:normal;
font-size:24px;
margin:50px auto 20px;
padding:0;
line-height:100%;
text-align:center;}

h2{
color:#333;
font-weight:normal;
font-family:"Julius Sans One",ロゴたいぷゴシック,sans-serif;
font-size:18px;
margin:5px auto;
padding:0;}

h3{
color:#333;
font-weight:normal;
font-family:"Julius Sans One",ロゴたいぷゴシック,sans-serif;
font-size:24px;
text-align:center;
padding:0;
margin:10px auto 20px;
position:relative;
bottom:20px;}

a{
color:#44617b;
text-decoration:none;
padding:0;
margin:3px;
transition:0.5s;
}

a:hover{
color:#80989b;
text-decoration:none;
}

.rule{
margin-bottom:2em;
}

.entry{
margin-top:0.5em;
}


li {
list-style:cjk-ideographic;
}

input[type],textarea{
height:80px;
width:80%;
font-family:"Julius Sans One","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
background:#add8e6;
color:#333;
border:solid 1px #add8e6;
margin:5px 10px;
padding:2px 5px;
}

input[type=text]{
margin:5px;
height:24px;
width:80px;}

input[type=submit]{
margin:5px;
height:auto;
width:80px;
cursor:pointer;
text-shadow:none;
border:solid 1px #333;
background:#333;
color:#fff;
}