/* PC
----------------------------------------------*/

@media screen and (min-width:751px) {
	a:link {
  color: #1eb9ee;
  text-decoration: underline;
}

a:visited {
  color: #1eb9ee;
  text-decoration: none;
}

a:hover {
  color: #1eb9ee;
  text-decoration: none;
}

a:active {
  color: #1eb9ee;
  text-decoration: none;
}

    .column {
        color: #595656;
        line-height: 1.8;
    }

    .column-header {
        padding: 22px 0px 18px;
    }


    .header-inner {
        width: 900px;
        margin: 0 auto;
    }

    .header-inner .logo {
        text-align: center;
    }

    .sitelink {
        border-bottom: 1px solid #eeeeee;
        border-top: 1px solid #eeeeee;
        font-size: 12px;
        padding: 14px 0px 16px;
    }

    .sitelink-inner {
        width: 900px;
        margin: 0 auto;
    }

    .sitelink a {
        color: #595656;
        font-size: 12px;
        text-decoration: none;
        margin-right: 3px;
    }
    
    .sitelink i {
        font-size: 15px;
    }
    /*.sitelink a:after {
        font-family: 'FontAwesome';
        content: '\f105';
        margin-right: -10px;
        position: relative;
        top: 0;
        right: -5px;
    }*/

    .sitelink p {
        color: #595656;
        font-size: 12px;
    }

    .column-box {
        width: 900px;
        margin: 0 auto;
    }

    .column-heading {
        width: 900px;
        padding: 40px 0 25px 0;
        text-align: center;
        margin: 0 auto;
    }

    .column-maintitle {
        padding: 0 0 15px;
        text-align: center;
        width: 900px;
        margin: 0 auto;
        font-size: 30px;

    }

    .column-title {
        font-size: 14px;
        text-align: center;
    }

    .column-box {
        display: flex;
        flex-flow: wrap;
        padding: 0 0 74px;
    }

    .card-box {
        /* float: left; */
        width: 280px;
        margin: 0 30px 30px 0;
        box-sizing: border-box;
        border: 1px solid #eeeeee;
        outline-offset: -1px;
    }

    .card-box:nth-of-type(3n) {
        margin: 0 0 30px 0;
    }

    .card-box a {
        text-decoration: none;
        color: #595757;
        display: block;
    }

    .card-visual {

    }

    .card-box a:hover {
        background-color: #78d5f5;
        transition: 0.5s ;
        color: #fff;
    }

    .card-title {
        font-size: 16px;
        line-height: 21px;
        padding: 16px 8px 27px 8px;
    }

    .card-day {
        font-size: 12px;
        padding: 0 8px 20px 8px;
        line-height: 12px;
    }

    /* article */
    .article {
        width: 900px;
        margin: 0 auto;
    }

    .photo {
        padding: 0 0 40px;
    }

    .article-text {
        font-size: 21px;
        color: #595757;
        line-height: 21px;
        padding: 20px 0 25px 0;
        text-align: left;
    }

    .text {
        color: #595757;
        font-size: 16px;
        line-height: 24px;
        padding: 0 0 35px 0;
    }
    
    .column-button {
        margin: 0 auto;
        width: 250px;
        padding: 10px;
        display: flex;
        -ms-align-items: center;
        align-items: center;
        justify-content: center;
        background-color: #78d5f5;
        margin-top: 15px;
        text-decoration: none;
        color: #fff;
    }
    
    .column-button i {
        margin-right: 10px;
    }

    .column-button:hover {
        text-decoration: none;
        color: #fff;
        cursor: pointer;
        opacity: .7;
    }

    .column-button:link {
        text-decoration: none;
        color: #fff;
    }

    .column-button:visited {
        text-decoration: none;
        color: #fff;
    }

    .column-button:active {
        text-decoration: none;
        color: #fff;
    }

    footer {
        margin: 29px 0 0;
        width: 900px;
        margin: 0 auto;
        background-color: #ffffff;

    }

    .logo-footer {
        text-align: center;
    }

    .logo-footer img {
        padding: 0 0 15px;
    }

    footer p {
        font-size: 12px;
        color: #595757;
        text-align: center;
        width: 900px;
        margin: 0 auto;
        margin: 0 0 50px 0;
    }
    
    /* 装飾用 */
	.text-code{
		border: 1px solid #999;
    	padding: 8px 20px;
		margin: 0 auto 35px;
	}
	.text-result{
		background:#eee;
		border-left: 8px solid #999;
    	padding: 8px 20px;
		margin: 0 auto 35px;
	}
    .text-blockquote {
        position: relative;
        padding: 10px 15px 10px 60px;
        box-sizing: border-box;
        font-style: italic;
        background: #efefef;
        color: #555;
        margin-bottom: 40px;
    }

    .text-blockquote:before{
        display: inline-block;
        position: absolute;
        top: 18px;
        left: 15px;
        content: "\f10d";
        font-family: FontAwesome;
        color: #cfcfcf;
        font-size: 30px;
        line-height: 1;
        font-weight: 900;
    }

    .text-blockquote p {
        padding: 0;
        margin: 10px 0;
        line-height: 1.7;
    }

    .text-blockquote cite {
        display: block;
        text-align: right;
        color: #888888;
        font-size: 0.9em;
    }

    .text-bold {
        font-weight: bold;
    }

    .text-italic {
        font-style: italic;
    }

    .tetx-strikethrough {
        text-decoration: line-through;
    }
    
    .text-list-item {
        display: flex;
        
    }

    .text-list-item i {
        margin-right: 10px;
        padding-top: 3px;
    }
    
    li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9 {
        list-style-position: outside;
        margin-left: 36px;
        padding-left: 16px;
    }
    
    pre {
        margin-bottom: 20px;
        overflow: auto;
        resize: horizontal;
        margin-bottom: 40px;
    }
    
}


/* SP
----------------------------------------------*/

@media only screen and (min-width: 0px) and (max-width: 750px) {
	a:link {
  color: #1eb9ee;
  text-decoration: underline;
}

a:visited {
  color: #1eb9ee;
  text-decoration: none;
}

a:hover {
  color: #1eb9ee;
  text-decoration: none;
}

a:active {
  color: #1eb9ee;
  text-decoration: none;
}
    
    .column {
        color: #595656;
        line-height: 1.5;
    }

     /*
    .logo {
        padding: 15px 15px 10px 15px;
        text-align: center
    }
    
    */


    .header-inner {
        width: 100%;
        margin: 0 auto;
    }

    .header-inner .logo {
        text-align: center;
        width: 90%;
        margin: 0 auto;
    }

    .sitelink {
        border-bottom: 1px solid #eeeeee;
        border-top: 1px solid #eeeeee;
        font-size: 14px;
        padding: 15px 10px 15px 10px;
    }
    
    .sitelink-inner {
        width: 100%;
        margin: 0 auto;
    }

    .sitelink a {
        color: #595656;
        font-size: 14px;
        text-decoration: none;
        margin-right: 5px;
    }

    .sitelink i {
        font-size: 16px;
    }
    /*.sitelink a:after {
    font-family: 'FontAwesome';
    content: '\f105';
    margin-right: -10px;
    position: relative;
    top: 0;
    right: -5px;
}*/
    
    
    .contents {
        width: 100%;
        margin: 0 auto;
    }

    .column-heading {
        padding: 20px 10px 20px 10px;
        text-align: center;
    }

    .column-box {
        padding: 0 10px 20px 10px;
    }

    
    .column-maintitle {
        padding: 0 0 10px 0;
        text-align: center;
        width: 100%;
        margin: 0 auto;
        font-size: 20px;

    }

    .column-title {
        font-size: 14px;
        text-align: center;
    }

    
    .card-box {
        width: 100%;
        margin: 0 0 10px;
        box-sizing: border-box;
        border: 1px solid #eeeeee;
    }


    .card-box a {
        text-decoration: none;
        color: #595757;
        display: block;
    }

    .card-visual {

    }

    /* 
    .card-box a:hover {
        background-color: #78d5f5;
        transition: 0.5s ;
        color: #fff;
    }
     */

    .card-title {
        font-size: 18px;
        padding: 10px 10px 8px 10px;
    }

    .card-day {
        font-size: 14px;
        padding: 0 10px 10px 10px;
    }

    /* article */
    .article {
        padding: 0 10px 0 10px;
    }
    
    .article-inner {
        width: 100%;
        margin: 0 auto;
    }

    .photo {
        padding: 0 0 20px;
        margin: 0 auto;
    }

    .article-text {
        font-size: 18px;
        padding: 15px 0 15px 0;
        text-align: left;
    }

    .text {
        color: #595757;
        font-size: 16px;
        padding: 0 0 30px 0;
    }
    
    
    
    .column-button {
        margin: 0 auto;
        width: 300px;
        padding: 10px;
        display: flex;
        -ms-align-items: center;
        align-items: center;
        justify-content: center;
        background-color: #78d5f5;
        text-decoration: none;
        color: #fff;
    }
    
    .column-button i {
        margin-right: 10px;
    }

    .column-button:hover {
        text-decoration: none;
        color: #fff;
        cursor: pointer;
        opacity: .7;
    }

    .column-button:link {
        text-decoration: none;
        color: #fff;
    }

    .column-button:visited {
        text-decoration: none;
        color: #fff;
    }

    .column-button:active {
        text-decoration: none;
        color: #fff;
    }

    .button a {
        text-decoration: none;
        color: #fff;
    }

    .button i {
        font-size: 16px;
        color: #fff;
        margin-right: 10px;
    }

    footer {
        text-align: center;
        background-color: #fff;
    }

    .logo-footer {
        margin: 0 auto;
        width: 70%;
        padding: 0 0 15px;
    }


    footer p {
        font-size: 11px;
        color: #595757;
        text-align: center;
        width: 100%;
        margin: 0 auto;
        margin: 0 0 20px 0;
    }
    
    /* 装飾用 */
	.text-code{
		border: 1px solid #999;
    	padding: 8px 20px;
		margin: 0 auto 30px;
	}
	.text-result{
		background:#eee;
		border-left: 8px solid #999;
    	padding: 8px 20px;
		margin: 0 auto 30px;
	}
    .text-blockquote {
        position: relative;
        padding: 10px 15px 10px 60px;
        box-sizing: border-box;
        font-style: italic;
        background: #efefef;
        color: #555;
        margin-bottom: 20px;
    }

    .text-blockquote:before{
        display: inline-block;
        position: absolute;
        top: 18px;
        left: 15px;
        content: "\f10d";
        font-family: FontAwesome;
        color: #cfcfcf;
        font-size: 30px;
        line-height: 1;
        font-weight: 900;
    }

    .text-blockquote p {
        padding: 0;
        margin: 10px 0;
        line-height: 1.7;
    }

    .text-blockquote cite {
        display: block;
        text-align: right;
        color: #888888;
        font-size: 0.9em;
    }

    .text-bold {
        font-weight: bold;
    }

    .text-italic {
        font-style: italic;
    }

    .tetx-strikethrough {
        text-decoration: line-through;
    }

    .text-list-item {
        display: flex;

    }

    .text-list-item i {
        margin-right: 10px;
        padding-top: 3px;
    }

    li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9 {
        list-style-position: outside;
        margin-left: 36px;
        padding-left: 16px;
    }

    pre {
        margin-bottom: 20px;
        overflow: auto;
        resize: horizontal;
    }
    
}