@charset "UTF-8";

:root {
    --A-color: #4b41d1;
    --B-color: #FFFFFF;
    --C-color: #FF99BE;
    --D-color: #65c4f0;
    --E-color: #99d100;
    --F-color: #f7b636;
    --G-color: #DBD8EE;
}

/*--- basic ---*/
*			 { margin: 0; padding: 0; }
html         { scroll-behavior: smooth; }
body		 {
    max-width: 1024px;
    margin: 0px auto; 
	height:100%;
	text-align: center;
    font-size: 16px;
	font-family: "Murecho","メイリオ",sans-serif;
    line-height: 1.8;
    color: var(--B-color);
	background-color: var(--A-color);
	overflow: scroll;
}

/*--- decoration ---*/
b                { font-weight: 600; }
.largetext       { font-size: 1.4em; font-weight: 600; }
h1				 { font-size: 3.0em; font-weight: 800; padding-bottom: 5px; }
h1:before	 	 { content:"\2771\0020"; color: var(--E-color); }
h2				 { font-size: 2.2em; font-weight: 800; }
h3				 { font-size: 1.7em; font-weight: 800; }
h4				 { font-size: 1.1em; font-weight: 800; }
hr {
    padding: 10px;
    border-width: 2px 0 0 0;
    border-style: dashed;
    border-color: var(--B-color);
    height: 2px;         /* 古いIE用 */
}

/*--- リンク挙動 ---*/
a:link		 { color: var(--C-color); }
a:visited	 { color: var(--C-color); }
a:hover		 { color: var(--E-color); }
a:active	 { color: var(--E-color); }
a img			 { border: none; }
a img:hover		 { transform:scale(0.96); transition:0.3s; }
.opa1 img:hover	 {  }

/*--- 画像関係 ---*/
img				 { max-width: 100%; }
.banner			 { width: 200px; height: 40px; margin-right: 5px; }
.luminous		 { cursor: zoom-in; }

/*--- 位置指定共通 ---*/
.center			 { text-align: center; }
.right			 { text-align: right; }
.left            { text-align: left; }
.padl-15		 { padding-left: 15px;}

/*--- 囲い共通 ---*/
.container		 { max-width: 1024px; margin: 0px auto; text-align: left; }
.nakami			 { padding: 0 5px; }
p				 { overflow-wrap : break-word; }


/*--- リンクボタン ---*/
.button {
    width:100px;
    font-size: 0.9em;
    font-weight:600;
    text-decoration:none;
    display:inline-block;
    text-align:center;
    padding: 1px 8px;
    margin: 4px 1px 0px 0px;
    border-radius:7px;
    border: solid 1px;
}
.button1:link		 { color: var(--D-color); }
.button1:visited	 { color: var(--D-color); }
.button1:hover		 { color: var(--B-color); background-color: var(--D-color); border-color: var(--D-color); }
.button1:active		 { color: var(--B-color); background-color: var(--D-color); border-color: var(--D-color); }
.button2:link		 { color: var(--E-color); }
.button2:visited	 { color: var(--E-color); }
.button2:hover		 { color: var(--B-color); background-color: var(--E-color); border-color: var(--E-color); }
.button2:active		 { color: var(--B-color); background-color: var(--E-color); border-color: var(--E-color); }
.button3:link		 { color: var(--F-color); }
.button3:visited	 { color: var(--F-color); }
.button3:hover		 { color: var(--B-color); background-color: var(--F-color); border-color: var(--F-color); }
.button3:active		 { color: var(--B-color); background-color: var(--F-color); border-color: var(--F-color); }
.button4             { width: 66px; height: 66px; padding: 19px 0px; margin: 4px 1px 0px 1px; border-radius:50%; }
/* SNSボタン3列時
.button4             { width: 94px; padding: 0px; margin: 4px 1px 0px 1px; }
*/
.button4:link		 { color: var(--B-color); background-color: unset; border-color: var(--B-color); }
.button4:visited	 { color: var(--B-color); background-color: unset; border-color: var(--B-color); }
.button4:hover		 { color: var(--A-color); background-color: var(--G-color); border-color: var(--G-color); }
.button4:active		 { color: var(--A-color); background-color: var(--G-color); border-color: var(--G-color); }

/*--- 収納ボタン ---*/
.hidden_box {
    margin:  0;
    padding: 8px 0;
}
.hidden_box label {
    padding: 4px 16px;
    color: var(--B-color);
    border: solid 1px var(--B-color);
    cursor :pointer;
}
.hidden_box label:hover {
    background-color: var(--B-color);
    color: var(--A-color);
}
.hidden_box input {
    display: none;
}
.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}
.hidden_box input:checked ~ .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}


/*-------------------------------------------------------------------------------------*/
/*--- 以下個別 ---*/


/*--- トップ ---*/
#header              { display: flex; padding: 30px 0px 20px 0px; }
.topinfo             { width: 50%; }
.topinfo_middle      {
    display: flex;
    padding: 10px;
    justify-content: center;
    align-items: center;
}
.topinfo_middle_left {
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* SNSボタン2行時
.topinfo_middle_left {
    width: 100%;
    height: 275px;
    display: flex;
    justify-content: center;
    align-items: center;
}
*/
.topinfo_nav {
    width: 170px;
    height: 240px; 
    display: flex;
    justify-content: center;
    align-items: center;
}
nav ul               { list-style: none; }
nav ul li            { padding: 5px 0px 10px 0px; }
nav ul li a          { font-size: 1.9em; font-weight: 600; text-decoration: none; }
nav li a:link		 { color: var(--B-color); }
nav li a:visited	 { color: var(--B-color); }
nav li a:hover		 { color: var(--E-color); }
nav li a:active	     { color: var(--E-color); }
.topinfo_nav_jp {
    position: relative;
    top: -11px;
    font-size: 0.7em;
    height: 15px;
}

.topinfo_middle_right { display:none; }
.topright             { width: 50%; }
.topimg               { width: 100%; height: 500px; object-fit: cover; }

.topinfo_top img      { width: 300px; }
.topicons             {
    width: 300px;
    margin-right: auto;
    margin-left: auto;
    display: inline-block;
    justify-content: center;
    align-items: center;
}
.topicons img {
    width: 45px;
    margin: 5px 10px 0px 10px;
}
.topicons img:hover {
    opacity: 0.5;
}


/*--- ニュース ---*/
.news {
    margin-bottom: 13px;
    color: var(--A-color);
}
.newsbox {
    background-color: var(--B-color);
    padding: 15px 15px;
    border-radius:10px;
    overflow-wrap : break-word;
    display:flex;
    height: 100%;
}
.newsimg {
    margin: auto;
}
.newsimg img {
    width: 150px;
    height: 150px;
    object-fit: cover;
}
.newstext {
    vertical-align: top;
    width: calc(100% - 150px);
    padding: 0 10px;
}


/*--- works ---*/
.worksimg .galleryimg       { font-size: 12px; }
.worksimg .galleryimg img   { height: 190px; display: block; }
.worksimg .galleryimg p     { max-width: 190px; }
.works_A        { display: flex; padding-top: 15px; }
.works_A_img    { width: 25vw; max-width: 200px; }
.works_A_text   { padding: 0px 10px; vertical-align: top; }
.works_B        { padding-top: 15px; }
.works_B_img    { width: 20vw; max-width: 180px; }
.works_C        { padding-left: 5px;}
.works_C:before { content:"\2771\0020"; color: var(--E-color); }
.category{
    display: inline-block;
    font-size: smaller;
    text-align:center;
    width: 70px;
    padding: 0;
    margin-right: 3px;
    color: var(--B-color);
    background-color: var(--A-color);
    border: solid 1px var(--B-color);
}


/*--- gallery ---*/
.galleryimg {
    display: inline-block;
    padding: 0px 10px 5px 0px;
}
.galleryimg img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius:10px;
}


/*--- about ---*/
.icon_me img { width: 120px; border-radius: 50%; }
.icon_me     { display:inline-block; padding: 0px 15px 5px 0px;}

/*--- リンク ---*/
.link h4:before { content:"\2771\0020"; color: var(--E-color); }

/*--- 一行コメント ---*/
.commarea		 { padding: 2px; font-size: 16px; }
.commbutton		 {
    padding: 2px 8px 1px 8px;
    font-weight: 600;
    color: var(--C-color);
    border: solid 1px var(--C-color);
    background-color: rgba(0, 0, 0, 0);;
    cursor :pointer; 
}
.commbutton:hover {
    color: var(--B-color);
    background-color: var(--C-color);
}
.commentlog h4:before   { content:"\275A\0020"; color: var(--E-color); }
.commentlog b           { font-weight: normal; color: var(--C-color); }


/*--- カウンター ---*/
.count span      { font-size: smaller; margin: 0px 2px 0px 4px; }
.count_day		 { width: 21px; -webkit-filter: invert(1);}
.count_all		 { width: 42px; -webkit-filter: invert(1);}

/*--- footer ---*/
.backtotop   {padding-right: 15px;}
.backtotop a {
    padding: 4px 16px;
    color: var(--B-color);
    border: solid 1px var(--B-color);
    cursor :pointer;
}
.backtotop a:link		 { color: var(--B-color); }
.backtotop a:visited	 { color: var(--B-color); }
.backtotop a:hover		 { color: var(--A-color); background-color: var(--B-color); }
.backtotop a:active 	 { color: var(--A-color); background-color: var(--B-color); }




/*-------------------------------------------------------------------------------------*/

/*--- レスポンシブ対応 ---*/

/*--- タブレット縦大 ---*/
@media screen and (max-width: 991px) { 
    .topinfo        { width: 60%;}
    .topright       { width: 40%; }
    .newsimg img    { width: 130px; height: 130px; }
    .newstext       { width: calc(100% - 130px); }
}
/*--- タブレット縦小 ---*/
@media screen and (max-width: 767px) { 
    body                { font-size: 14px; -webkit-text-size-adjust: 100%; }
    .topinfo_top img    { width: 250px; }
    .topinfo_nav        { width: 160px; height: 220px; }
    .topicons           { width: 250px; }
    .topicons img       { margin: 5px 6px 0px 6px; }    
    .newsimg img        { width: 100px; height:100px; }
    .newstext           { width: calc(100% - 100px); }
    .works_B_text       { padding: 0px; vertical-align: top; }
    .galleryimg img     { width: 95px; height: 95px; }
    .commarea           { font-size: 14px; }
    .button4            { font-size: 0.8em; width: 56px; height: 56px; padding: 17px 0px; margin: 2px 1px 0px 1px; }
}
/*--- スマホ ---*/
@media screen and (max-width: 500px) { 
    body    {
        background-image: url(../img/css/footprints.png);
        background-repeat: no-repeat;
        background-position: right top;
        background-size: 110px;
        background-attachment: scroll;   
    }
    .topinfo_top img    { width: 300px; }
    .topicons           { width: 300px; }
    nav                 { padding: 20px 20px; }
    nav ul li a         { font-size: 1.6em; }
    .topinfo            { width: 100%;}
    .topinfo_middle_left  { width: 150px;}
    .topinfo_nav          { width: 120px; height: 190px; }
    .topinfo_middle_right { display: inline-block; width: 150px; }
    .topright           { display: none; }
    .topimg             { height: 300px; }

    .newsbox        { display: block; }
    .newsimg        { text-align: center; }
    .newsimg img    { width: 100%; height: 60px; }
    .newstext       { width: 100%; padding: 0; }
    .link img   { display: block; }
    .link p     { padding-bottom: 10px; }
}



/*-------------------------------------------------------------------------------------*/