@charset "UTF-8";

/*--common-----*/
html {
background: #fff;
color: #333;
font-family: "Hiragino Kaku Gothic Pro", Meiryo, arial, helvetica, sans-serif;
font-size: 62.5%;
}

body {
margin: 0;
padding: 0;
font-size: 1.6rem;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form,
fieldset, legend, input, textarea, p, blockquote, th, td, img, figure {
margin: 0;
padding: 0;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

fieldset, img {
border: 0;
}

address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal;
font-weight: normal;
}

ol, ul {
list-style: none;
}

caption, th {
text-align: left;
}

h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}

q:before, q:after {
content: '';
}

abbr, acronym {
border: 0;
font-variant: normal;
}

sup {
vertical-align: text-top;
}

sub {
vertical-align: text-bottom;
}

input, textarea, select {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
*font-size: 100%;
}

legend {
color: #000;
}

a {
color: #333;
text-decoration : none;
}

*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}


/*--header-----*/
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #fff;
z-index: 100;
}
.header-inner {
display: block;
float: none;
margin-right: auto;
margin-left: auto;
padding: 25px 20px;
max-width: 1160px;
}
.header-inner ul {
float: right;
width: 40%;
table-layout: fixed;
margin-left: auto;
text-align: right;
line-height: 100%;
}
.header-inner ul li {
display: inline;
}
.logo-inner {
float: left;
width: 60%;
padding: 12px 0 0;
}
.logo-inner .logo {
color: #333;
font-size: 3rem;
font-weight: bold;
line-height: 100%;
text-align: left;
}
.logo-inner .logo-sub {
padding: 6px 0 0 3px;
font-size: 1.6rem;
font-weight: bold;
}

@media screen and (max-width: 767px) {
.header-inner {
padding: 10px;
max-width: 1160px;
}
.header-inner ul {
float: right;
width: 40%;
table-layout: fixed;
margin-left: auto;
text-align: right;
}
.header-inner ul li {
display: inline;
margin: 0;
padding: 0;
}
.header-inner ul li img {
width: 30%;
height: 30%;
}
.logo-inner .logo {
font-size: 2rem;
}
.logo-inner .logo-sub {
font-size: 1.6rem;
}
}
@media screen and (max-width: 480px) {
.header-inner ul {
float: right;
width: 40%;
}
.header-inner ul li img {
width: 25%;
height: 25%;
}
.logo-inner .logo {
font-size: 1.6rem;
}
.logo-inner .logo-sub {
font-size: 1.2rem;
}
}

.header-inner::after {
content:".";
display: block;
visibility: hidden;
height: 0.1px;
font-size: 0.1rem;
line-height: 0;
clear: both;
}


/*--nav-----*/
.global-nav {
/*max-width: 1160px;*/
width: 100%;
margin: 0 auto 25px auto;
background: #88c5f8;
}
.global-nav ul {
text-align: center;
padding: 20px 0;
}
.global-nav li {
display: inline;
border-left: 1px solid #444;
margin: 12px 0;
padding: 0 20px;
font-size: 1.8rem;
font-weight: bold;
white-space: nowrap;
}
.global-nav li:last-child {
border-right: 1px solid #444;
}
.global-nav li a:hover {
background: linear-gradient(transparent 50%, #fff 50%);
}

@media screen and (max-width: 767px) {
.global-nav li {
font-size: 1.4rem;
}
}
@media screen and (max-width: 480px) {
.global-nav li {
margin: 8px 0;
font-size: 1.4rem;
}
}


/*--layout-----*/
.container {
width: 100%;
margin: 0 auto;
padding-top: 140px;
}
.container-inner {
display: grid;
max-width: 1160px;
box-sizing: border-box;
grid-template-columns: 100%;
grid-template-areas: "content" "side";
margin: 0 auto;
}

@media screen and (max-width: 480px) {
.container {
width: 100%;
margin: 0 auto;
padding-top: 140px;
}
.container-inner {
margin: 0 5px;
display: block;
box-sizing: border-box;
}
.side {
border-top: 2px solid #d5d5d5;
margin-top: 30px;
padding-top: 15px;
}
}
@media screen and (min-width: 767px) {
.container-inner {
display: grid;
grid-template-columns: 75% 25%;
grid-template-areas: "content" "side"
}
.content {
padding: 0 30px 0 20px;
border-right: 1px solid #d5d5d5
}
.side {
padding: 0 20px 0 30px;
}
}


/*--article-----*/
.article {
padding: 30px 10px;
}


/*--title-----*/
h2.title {
position: relative;
display: inline-block;
margin-bottom: 1.5em;
font-size: 2.4rem;
font-weight: bold;
}
h2::before {
content: '';
position: absolute;
left: 50%;
bottom: -15px;/*線の上下位置*/
display: inline-block;
width: 60px;/*線の長さ*/
height: 5px;/*線の太さ*/
-webkit-transform: translateX(-50%);
transform: translateX(-50%);/*位置調整*/
background-color: #88c5f8;/*線の色*/
border-radius: 2px;/*線の丸み*/
}
h3.sub-title {
font-size: 2.1rem;
margin-bottom: 12px;
font-weight: bold;
}
h4.sub-title {
margin-bottom: 8px;
font-weight: bold;
}


/*--table-----*/
.article-table {
margin: 17px 0;
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
.article-table > caption {
color: #000;
font-weight: bold;
text-align: left;
}
.article-table th ,
.article-table td {
padding: 7px;
border-bottom: solid 1px #ccc;
border-top: solid 1px #ccc;
vertical-align: top;
text-align: left;
}
.article-table th {
color: #000;
background-color: #ededed;
font-weight: normal;
align-content: center;
}
.article-table .compound {
padding-top: 0;
}
.article-table .compound > p {
margin-top: 7px;
}


/*--movie-----*/
.article-movie {
position: relative;
width: 100%;
margin: 10px 0;
padding: 60% 0 0;
text-align: center;
}
.article-movie iframe {
position: absolute;
border: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0
}


/*--img-----*/
.article-img img {
width: 100%;
margin: 10px 0;
text-align: center;
}


/*--sns-----*/
.side-sns {
margin-top: 25px;
text-align: center;
}


/*--footer-----*/
footer {
font-size: 1.2rem;
text-align: center;
margin-top: 20px;
padding: 20px 0 40px;
background: linear-gradient(#fff, #5d5956);
}
.ft-sns {
margin: 8px 0;
}
.ft-sns li {
display: inline;
}
.ft-sns img{
width: 37px;
padding: 5px;
}


/*--text-----*/
.txt-bold {
font-weight: bold;
}
.txt-italic {
font-family: 'Osaka-mono', 'MS Gothic', sans-serif;
font-style: italic;
}


/*--link-----*/
a.link1 {
padding: 8px 0;
color: #0c79d4;
}
a.link1:hover {
color: #88c5f8;
text-decoration: underline;
}
a.link2 {
padding: 8px 0;
}
a.link2 {
display: block;
width: 40%;
margin: 0 auto;
padding: 8px;
color: #0c79d4;
text-align: center;
border: 2px solid #0c79d4;
}
a.link2:hover {
color: #88c5f8;
border: 2px solid #88c5f8;	
}


/*--padding/margin-----*/
.tac {
text-align: center;
}

span.link-t-a {
position: relative;
top: -140px;/*左の数値を変えると、上下に調整します*/
display: block;
}

.domain::before {
   content: '@';
}

.spd {
   display: none !important;
}
@media screen and (max-width: 767px) {
   .spd {
      display: block !important;
   }
}

.twitter-timeline {
    margin: auto;
}