@charset "utf-8";
/* 
Theme Nama:　portfolio
Author: みっちー
Description: みっちーのポートフォリオのテーマです。
Version: 1.0
*/



header.masthead {
    background-image: url('img/topbk.png')
}

header.masthead .overlay {
    background-color: unset;
}

.site-heading h1,
.site-heading span {
    font-family: 'Cinzel', serif;
}

* {
    font-family: serif;
}

img {
    width: 100%;
    height: auto;
}

h2 {
    font-family: serif !important;
    text-align: center;
    margin-bottom: 2.5em;
    color: #01002b;
    font-weight: 100;
}

/* インスタ */
.insta {/*アイコンの背景*/ position: relative;/*相対配置*/ display: inline-block; width: 45px;/*幅*/ height: 45px;/*高さ*/ vertical-align: middle;/*垂直中央に*/ background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/ overflow: hidden;/*はみ出た部分を隠す*/ border-radius: 50%;/*角丸に*/}.insta:before {/*グラデーションを重ねるため*/ content: ''; position: absolute;/*絶対配置*/ top: 24px;/*ずらす*/ left: -18px;/*ずらす*/ width: 70px;/*グラデーションカバーの幅*/ height: 70px;/*グラデーションカバーの高さ*/ background: -webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%); background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);/*グラデーション②*/}.fa-instagram {/*アイコン*/ color: #FFF;/*白に*/ position: relative;/*z-indexを使うため*/ z-index: 2;/*グラデーションより前に*/ font-size: 30px;/*アイコンサイズ*/ top: 8px;/*上下にずらす*/ left: -0.5px;/*左右にずらす*/}

/* 投稿記事h2 */
@media only screen and (min-width: 768px) {
    .post-preview>a>.post-title {
        font-size: 16px;
        font-family: serif;
    }
}

.post-preview>a {
    text-decoration: none;
    display: block;
}

img.sample.wp-post-image {
    width: 100%;
    height: auto;
    border: solid 1px #ddd;
    transition: .3s ease;
}

img.sample.wp-post-image:hover {
    box-shadow: 0 5px 15px 0 rgb(0 0 0 / 50%);
}

.col-sm-4 {
    width: 45%;
    margin: 0 auto 5em;
}

.col-lg-8 {
    width: 90%;
}

footer ul.list-inline.text-center {
    margin: 0 auto 1em;
}

.site-heading h1 {
    font-family: serif;
    font-weight: 100;
    -ms-writing-mode: tb-rl;
    margin: 0 auto;
}

header.masthead .page-heading, header.masthead .post-heading, header.masthead .site-heading {
    padding: 100px 0;
}

header.masthead .page-heading h1, header.masthead .site-heading h1 {
    font-size: 40px;
}

@media (max-width: 576px) {
	.col-sm-4 {
    width: 100%;
    margin: 0 auto 3em;
    border-bottom: solid 1px #ddd;
}
}


@media only screen and (min-width: 992px) {

	.btn-primary {
    display: block;
    padding: 1em 2em;
}
	
.col-sm-4 {
	width: 48%;
    margin: 0 auto 3em;
    border-bottom: solid 1px #ddd;
    max-width: 48%;
    display: inline-block;
}
	
}

	.btn-primary {
    color: #fff;
    background-color: #05014d;
    border-color: #05014d;
    margin: 0 auto;
    font-family: serif;
    display: block;
}

h3 {
font-family: serif;
    margin: 0 auto 2em;
    text-align: center;
}

.category {
	text-align:right;
	
}

.category a {
    text-decoration: none;
    color: #fff;
    background: #161159;
    padding: 0.25em 1em;
    border-radius: 1em;
}

.category a:hover {
    opacity: .5;
}

.site-heading a {
    text-decoration: none;
    color: #fff;
    background: #05014d;
    padding: 0.75em;
    margin: 4em auto 0;
    display: inline-block;
    border-radius: 5px;
}

.site-heading a:hover {
    opacity: .75;
}

/* トップのGallery見た目 */

.btn,input[type="submit"] {
text-decoration: none;
    color: #05014d;
    padding: 0.75em 2em;
    margin: 0 auto;
    border-radius: 0;
    border: solid 1px #05014d;
	background:unset;
}

.btn:hover,input[type="submit"]:hover {
    opacity: .75;
	color: #fff;
	background:#05014d;
}

.gallery p {
	text-align: center;
    margin: 0 auto 5em;
} 

section#info {
    width: 80%;
    margin: 0 auto;
    text-align: center;
	padding-top:1em;
}

section#info p {
    margin: 0 auto 3em;
}

h3:before {
content: '';
    position: absolute;
    bottom: -15px;
    display: inline-block;
    width: 60px;
    height: 5px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #020030;
    border-radius: 2px;
}